Redux

创建仓库

1、在src 新建store文件夹，在store下新建一个仓库index.js和管理员reducer.js

image.png

2、index.js

import {createStore} from 'redux' //引入redux的方法
import reducer from './reducer'  //引入管理员
const store = createStore(reducer)          // 创建数据存储仓库
export default store                 //把仓库暴露出去

动态修改仓库数据

3、某一组件中
获取仓库数据

this.state = store.getState();

修改仓库数据

  // 值变化时，修改仓库的值
  changeFn(e) {
    const action = {
      type: "changeInput",
      value: e.target.value,
    }; //第一个是对Action的描述，第二个是要改变的值。
    store.dispatch(action); //通知仓库管理员
  }

4、reducer.js
** Reducer里只能接收state，不能改变state。最后返回新的仓库数据；Reducer必须是纯函数 **

const defaultState = {
  inputValue: "Write Something",
  data: ["早上4点起床，锻炼身体", "中午下班游泳一小时"],
}; //默认数据
export default (state = defaultState, action) => {
   /*
   state:指的是原始仓库里的状态。
   action：指的是action新传递的状态。
   */
  if (action.type === "changeInput") {
    let newState = JSON.parse(JSON.stringify(state)); //深度拷贝state
    newState.inputValue = action.value;
    return newState;
  }
  
  return state;
};

此时store里的数据已经更新
5、更新某一组件

  this.storeChange = this.storeChange.bind(this)  //转变this指向
  store.subscribe(this.storeChange) //订阅Redux的状态

再次获取仓库数据赋值给当前的state,以达到更新组件

storeChange(){
     this.setState(store.getState())
 }

6、组件中的增加方法

 addListFn() {
    const action = { type: "addItem" };
    store.dispatch(action);
  }

reducer.js接收

  //增加
  if (action.type === "addItem") {
    //根据type值，编写业务逻辑
    let newState = JSON.parse(JSON.stringify(state));
    newState.data.push(newState.inputValue); //push新的内容到列表中去
    newState.inputValue = "";
    return newState;
  }

7、然后继续调用第 "5" 步骤，刷新组件

Redux实际开发中的小技巧

1、把Action Type单独拆分出一个文件。在src/store文件夹下面，新建立一个actionTypes.js文件，然后把Type集中放到文件中进行管理。

export const  CHANGE_INPUT = 'changeInput'
export const  ADD_ITEM = 'addItem'
export const  DELETE_ITEM = 'deleteItem'

写好了ationType.js文件，可以引入到TodoList.js组件当中，引入代码如下：

import { CHANGE_INPUT , ADD_ITEM , DELETE_ITEM } from './store/actionTypes'
``
2、公共的Acion方法