一、纯函数
1、react 中的纯函数
- react 中组件就被要求像是一个纯函数（因为还有类组件）
- redux 中有一个reducer 的概念，也是要求必须是一个纯函数
2、 纯函数的条件
- 确定的输入一定会产生确定的输出
- 函数在执行过程中，不能产生副作用
3、副作用的概念
表示在执行一个函数时，除了返回函数值之外，还对调用函数产生了附加的影响。比如修改了全局变量，修改参数或者改变了外部的存储
二、Redux 的三大原则
- 单一数据源：整个应用程序的state 被存储在一颗object tree 中，并且这个object tree 只存储在一个store 中
- state 是只读的：唯一修改state 的方法一定是触发action
- 使用纯函数来执行修改：通过reducer 将旧的state 和actions 联系在一起，并且返回一个新的state
三、Redux 的核心概念
1、Store
- 定义初始化数据，通过reducer 存放到Store 中，所有Store 中的数据都是来源于reducer 函数
2、action
- Redux 中所有数据的变化，必须通过派发（dispatch）action 来更新
- action 是一个普通的JavaScript 对象，用来描述这次更新的type 和content
- 强制使用action 的好处是可以清晰的知道数据到底发生了什么样的变化，所有的数据变化都是可跟踪、可预测的
3、reducer
- reducer 是一个纯函数
- reducer 做的事情是将传入的state 和action 结合起来生成一个新的state
示例：
// store/index.js
import { createStore } from "redux"
import reducer from "./reducer"
const store = createStore(reducer)
export default store// store/reducer.js
import * as actionTypes from "./contants"
const initialState = {counter: 100
}
function reducer(state = initialState, action) {switch(action.type) {case actionTypes.ADD_NUMBER:return { ...state, counter: state.counter + action.num }case actionTypes.SUB_NUMBER:return { ...state, counter: state.counter - action.num }default: return state}
}
export default reducer// store/actionCreators.js
import * as actionTypes from "./contants"
export const addNumberAction = (num) => ({type: actionTypes.ADD_NUMBER,num
})
export const subNumberAction = (num) => ({type: actionTypes.SUB_NUMBER,num
}) // store/constants.js
export const ADD_NUMBER = "add_number"
export const SUB_NUMBER = "sub_number"
)
