Redux基本原理及如何使用

定义：

　　Redux是状态统一管理容器，为了解决不同组件之间状态不统一的问题。

特点：

　　Redux的数据流动是单向的，形成一个闭环循环。

如上图：我们从组件作为切入点，组件的状态值从Store获取到，如果想改变Store中的值，禁止直接逆向操作，只能先通过dispatch方法传入对象类型的action，再将action传入reducer函数中，reducer函数是唯一可以操作store中state值的角色，它包含两个参数，第一个state, 第二个action, 如此循环形成一个单向闭环，这就是单向数据流。

实操：

一：创建一个react项目demo 

npx create-react-app redux_demo

二：打开项目，运行项目

cd .\redux_demo\
npm start

三：安装Redux

npm install redux --save-dev

四：将根目录下的index.js文件中的代码替换为下面代码

import { createStore } from 'redux';

function default_reducer(state = {}, action) { // 初始化state为空对象
    switch (action.type) {  // 定义action
      case 'setName':
        return {
          ...state,
          name: action.value
        }
      default: 
        return state
    }
};

let store = createStore(default_reducer); 

console.log('初始值', store.getState());
console.log('///////')

store.dispatch({              // 修改值
    type: 'setName',
    value: 'bar' 
})   
console.log('修改后的state值', store.getState());

五：添加监听state变化的订阅功能

import { createStore } from 'redux';

function default_reducer(state = {}, action) { // 初始化state为空对象
    switch (action.type) {  // 定义action
      case 'setName':
        return {
          ...state,
          name: action.value
        }
      default: 
        return state
    }
};

let store = createStore(default_reducer); 

store.subscribe(() => {   //监听到state修改后会自动执行
  console.log('当前state值', store.getState());
});


store.dispatch({              // 修改值
    type: 'setName',
    value: 'bar' 
})  

store.dispatch({              // 修改值
  type: 'setName',
  value: 'others' 
})