redux

纯函数

函数式编程中有一个概念叫纯函数，JS符合函数式编程的范式，所有也有纯函数的概念。

确定的输入，一定会产生确定的输出；
函数在执行过程中，不能产生副作用；

Redux的核心理念-store

Redux的核心理念-action

Redux要求通过action来更新数据；
所以数据的变化，必须通过派发(dispath)action来更新；
action是一个普通的JS对象，用来描述这次更新的type和content；

强制action的好处是可以清晰地知道数据到底发生了什么样的变化，所有的数据变化都是可追踪、可预测的；

Redux的核心理念-reducer

将state和action联系在一起；
reducer是一个纯函数；
将传入的state和action结合起来生成一个新的state;

Redux的三大原则

单一数据源

整个应用程序的state被存储在一颗object tree中，并且这个object tree只存储在一个store中；

state是只读的

唯一修改state的方法是触发action，确保了view或网络请求都不能直接修改state；
这样保证所有的修改都被集中化处理，并且严格按照顺序来执行；

使用纯函数来执行

通过reducer将旧state和actions联系在一起，并且返回一个新的state;
可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分；

redux单独使用案例

store->index.js

import redux from 'redux';
import reducer from './reducer.js'

const store = redux.createStore(reducer);

export default store;

store->constants.js

export const ADD_NUMBER="ADD_NUMBER";
export const SUB_NUMBER = "SUB_NUMBER";

store->actionCreators.js

import { ADD_NUMBER, SUB_NUMBER } from "./constants.js";

/* export function addAction(num) {
  return {
    type: "ADD_NUMBER",
    num,
  };
} */

/* export const addAction = (num)=>{
	return {
    type: "ADD_NUMBER",
    num,
  };
} */

export const addAction = (num) => ({
  type: ADD_NUMBER,
  num,
});

export const subAction = (num) => ({
  type: SUB_NUMBER,
  num,
});

store->reducer.js

import { ADD_NUMBER, SUB_NUMBER } from "./constants.js";

const defaultState={
	counter:0
}

function reducer(state = defaultState, action) {
  switch (action.type) {
    case ADD_NUMBER:
      return { ...state, counter: state.counter + action.num };
    case SUB_NUMBER:
      return { ...state, counter: state.counter - action.num };
    default:
      return state;
  }
}

export default reducer;

index.js

import store from './store/index.js';
import {
	addAction,
	subAction
} from './store/actionCreators.js';

store.subscribe(() => {
  console.log("counter", store.getState().counter);
});

store.dispatch(addAction(10));
store.dispatch(subAction(5));

redux使用流程

1.全局通常只有一个Store，存储我们的State；
2.Component中在某些情况会派发Action（这些Action是我们提前定义好的）；
3.Reducer会接收到这些Action，并且在Reducer中会返回一个新的State，作为Store的State；
4.State发生更新之后会触发通知，告知订阅者数据发生了改变；
5.订阅者拿到最新的数据（在props中），更新到jsx中，界面发生改变；

React中的state如何管理

UI相关的组件内部可以维护的状体，在组件内部自己来维护；
大部分需要共享的状态，都交给redux来管理和维护；
从服务器请求的数据（包括请求的操作），交给redux来维护；