redux

三大原则

• 单一数据源
  整个应用的state都存储在一个状态树中
• State是只读的
  只能通过action来改变state
• 使用纯函数来执行修改
  只能通过action来同志reducer来改变state

Action
action通过store.dispatch把通知发送到reducer中，reducer根据发送来的type进行分别处理。
下面就是一个action。

{
	type: "ADD_ONE"
}

Reducer
reducer接收到action的通知，然后再进一步处理数据之后更新到store中。

function (state = { number: 0 }, action) {
     switch (action.type) {
         case "ADD_ONE":
             return { ...state, number: state.number+1 }
         default:
             return state;
     }
     return state;
}

Store
store包含了整个数据，并且提供getState、dispatch、subscribe方法

具体实现

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunkMiddleware from "redux-thunk";

const oneReducer = function (state = {count: 0}, action) {
     switch (action.type) {
         case "ADD_ONE":
             return { ...state, count: state.count + 1 }
         default:
             return state;
     }
     return state;
}

//当有多个reducer的时候，通过combineReducers合并reducer
const rootReducers = combineReducers({
     oneReducer
 })
 
const store = createStore(
     rootReducers,
     // 添加中间件，支持异步操作
     applyMiddleware(thunkMiddleware) 
)

store.dispatch({
	type: "ADD_ONE"
})

console.log(store.getState())
//最后打印出来的count=1，这样就完成了数据状态的修改