react-redux

工作原理

Redux的工作流程

React Component 是页面上的组件 (借书的用户)
Store 是存储数据的公共区域(相当于图书馆的管理员)
Action Creators 数据传递的过程(当在图书馆借书的时候说的话做的事)
Reducers 记录本 (还书和借书的地方)

可以通过npm或者是 yarn
npm

npm install --save react-redux 

yarn

yarn add react-redux

因为使用的是redux, 所以所有的数据都存在store之中 在src的目录下创建一个名为store的文件夹 在创建一个index.js

在index.js 文件当中我们这样去写:

import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

这个这样理解 store是一个图书的管理员 它需要一个笔记本去帮忙管理这些图书 所以在store文件夹目录下面创建 reducer.js reducer是一个纯函数

//这个数据的初始值
import { CHANGE_VALUE, SUBMIT_TYPE, SPLICE_TYPE, INIT_LIST_ACTION} from '../ActionTypes';

const defaultState = {
    values: '',
    list: []
};
export default (state = defaultState , action) =>{
    if(action.type === CHANGE_VALUE){
        const newState = JSON.parse(JSON.stringify(state));
        newState.values = action.values;
        return newState;
    }

    if(action.type === SUBMIT_TYPE){
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.push(newState.values);
        newState.values = '';
        return newState;
    }
    if(action.type === SPLICE_TYPE){
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index, 1);
        return newState;
    }

    if(action.type === INIT_LIST_ACTION){
        const newState = JSON.parse(JSON.stringify(state));
        newState.list = action.data;
        return newState;
    }
    return state;
}

创建一个组件 test.js和store同级

import React, { Component } from 'react';
import {  Button, Input, List} from 'antd';
import store from './store';
// import { getInputChangeAction, getInputSubmitAction, getInputListAction} from './actionCreators';
import { getInputChangeAction, getInputSubmitAction, getInputListAction, getInitList} from './actionCreators';
import { CHANGE_VALUE, SUBMIT_TYPE, SPLICE_TYPE, GET_INIT_LIST} from './ActionTypes';

   class test extends Component{

      constructor(props){
        super(props);
        this.state= store.getState();
        this.submit = this.submit.bind(this);
        this.changes = this.changes.bind(this);
        this.handChange =this.handChange.bind(this);
        this.listClick =this.listClick.bind(this);
        store.subscribe(this.handChange);
      }

    componentDidMount(){
    }

    changes(e){
        
        let type = CHANGE_VALUE;
        let values = e.target.value;
        const action = getInputChangeAction(type, values);
        store.dispatch(action);
    }

    handChange(){
        this.setState(store.getState());
    }

    submit(){
        let type = SUBMIT_TYPE;
        const action = getInputSubmitAction(type);
        store.dispatch(action);
    }

    listClick(index){
        let type = SPLICE_TYPE;
        const action = getInputListAction(type, index);
        store.dispatch(action);
    //immutable: state 不允许我们做任何的改变 不能直接改state  做性能优化使用的
    // 父 -> 子  属性传值 this.props去接收  
    // 子 -> 父  属性传函数名并且改变this的指向 this.props去调用父组件的方法 this.props.zzz(this.props.dddd)  
    }

    render(){
        return (
            <div>
                <div>
                    <Input 
                    value={this.state.values}
                    placeholder= 'todo list' 
                    onChange ={this.changes}
                    style={{ width: '200px', height: '30px'}} />
                    <Button 
                    onClick ={this.submit}
                    type="primary"
                    >提交
                  </Button>
                </div>
                <List 
                    style={{ width: '200px'}}
                    bordered
                    dataSource={this.state.list}
                    renderItem={item => (<List.Item onClick={this.listClick}>{item}</List.Item>)}
                />
            </div>
        )
    }
}

    export default test;

和test.js同级创建actionCreators.js和ActionTypes.js ，ActionTypes.js是为了写一个声明变量的地方,方便代码管理和优化 写一个共同区域 调用时导入即可
actionCreators.js:

export const getInputChangeAction = (type, values) => ({
    type, 
    values
})

export const getInputSubmitAction = (type) =>({
    type
})

export const getInputListAction = (type, index) =>({
    type, 
    index
})

export const initListAction = (type , data) =>({
    type,
    data
})
export const getInitList = (type) =>({
    type,
})

ActionTypes.js

export const CHANGE_VALUE = 'change_value';
export const SUBMIT_TYPE = 'submit_type';
export const SPLICE_TYPE = 'splice_type';
export const INIT_LIST_ACTION = 'init_list_action';
export const GET_INIT_LIST = 'get_init_lst';

redux 中间件

中间件顾名思义就是谁和谁的中间, 在图中 View在Redux会派发一个Action， Action通过Store的Dispatch方法派发给Store, Store接收到Action 连同之前State 一同传给Reducer Reducer会返回一个新的数据给Store Store然后去改变自己的State 这个是Redux的标准流程

Redux的中间件的中间是指 Action 和 Store 之间的关系

Action 只能是一个对象 派发Store 这个是在没有使用redux-thunk情况下, 在使用redux-thunk
Action 可以为一个函数 所以Dispatch方法就是Action和Store的中间件 就是对Dispatch方法的封装

利用react-thunk对Dispatch方法进行封装 这时给Dispatch传入是一个对象 它会直接把这个对象传给Store 如果Dispatch传入是一个函数的话 先执行 然后会根据你传入的参数不同进行不同的事情