学习笔记之redux

- redux其实就就是一个数据管理库，没有什么复杂的方法什么的，一步一步的储存和取出

- 在项目中可以把redux相关的文件放在一个文件夹里，这样好看一些

- 在redux里面要放的东西有，存储数据的 store.js 当然这个里不一定真的要放数据，这个仅仅是为了创建store而已 ，真正放初始数据的是reducer.js,在这里面放入初始数据，并做数据的操作，然后再把reducer传递给store，创建真正的数据库，用createStore这个方法创建真正的store。然后action是用来描述动作的，仅仅是描述一下而已，最上面的父组件把这个属性传递下去，所有的子组件都可以通过props得到自己想要的东西。

 

- reducer.js //reducer操作的本身是一个函数操作

let initVal = {
    todos: []
}  //放一个初始数据对象，里面必须包含todos

function reducer(state = initVal, action) {
    let newState;
    switch(action.type){
        case ADD_TODO:  //自定义动作描述，也不一定非要用另外的文件来装，可以自定义字符串描述
        newState={
           //对数据做的操作
        }
    }
    return newState;  //返回新的数据
}
export default reducer; 

- store.js  //只是为了创建真正的store

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

let store = createStore(reducer);//传入reducer并创建
export default store;

- action.js  //选择即将做的事的描述，然后拿到处理对应的数据（在组件中选择要做的事）

let actions = {
  addTodo: function(payload) {
    return {type: "ADD_TODO", payload};
  }
};
export default actions;

- 在最外层组件使用Provider标签包裹并绑定store属性

<Provider store={store}></Provider >

- 在组件中使用redux

export default connect((state) => ({
    ...state
}),actions)(DoneList);  //把actions作为参数传入connect高阶函数中

在组件中通过props就可以直接调到想要的方法或数据