Redux

Redux 简介

• Redux = Reducer + Flux

Redux 的工作流程

image.png

使用antd编写TodoList 页面

• 安装Redux yarn add redux
• 通过action 传值给 reducers 使用store.dispatch(action)方法

handleInputChange (e){
        const action = {
            type:'change_input_value',
            value:e.target.value
        }
        store.dispatch(action)
    }

• store 会自动将组件中的值传递给reduceres ===> (previousState,action)
• reduceres 可以接收state,但是绝不能修改state;根据store.dispatch(action) 中的type判断哪个修改，修改内容为什么

// reducer 可以接受state，但是绝不能修改state
export default (state = defaultState,action) => {
    if (action.type === 'change_input_value'){
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.value;
        return newState;
    }

    if (action.type === 'add_todo_item'){
        const  newState = JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputValue);
        newState.inputValue = '';
        return newState;
    }

    return state;
}

• 组件如何获取store 修改后的值?通过constructor初始化方法中store.subscribe()方法

constructor(props){
        super(props);
        this.state = store.getState();
        this.handleStoreChange = this.handleStoreChange.bind(this);   store.subscribe(this.handleStoreChange);
    }

• 在handleStoreChange方法中获取改变后的store 的值

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

箭头函数传参问题

 this.deleteRow(id, e)}>Delete Row
Delete Row

上述例子中，参数e作为React事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显示的进行传递，但是通过bind的方式，事件对象以及更多的参数将会被隐士的进行传递。

总结

• store是唯一的
• 只有store能够改变自己的内容
• Reducer 必须是纯函数
  • 纯函数指的是，给定固定的输入，就一定会有固定的输出，而且不会有任何副作用
• creatStore
• store.dispatch
• store.getState
• store.subscribe

补充

• JSON.parse(string):接收一个JSON字符串并将其转换成一个JavaScript对象
• JSON.stringify(obj):接收一个javaScript对象并将其转换为一个JSON 字符串