该type字段应该是一个字符串，为该操作提供一个描述性名称，例如"todos/todoAdded". 我们通常把那个类型的字符串写成"domain/eventName"，其中第一部分是这个动作所属的特征或类别，第二部分是发生的具体事情。
例如：
const addTodoAction = {
type: 'todos/todoAdded', //todoAdded添加事件，添加一个任务
payload: 'Buy milk' //附加信息
}
action 创建函数：是一个创建并返回动作对象的无副作用的纯函数。我们通常使用这些，因此我们不必每次都手动编写动作对象：
const addTodo = text => {
return {
type: 'todos/todoAdded',
payload: text
}
}
reducer是一个无副作用的纯函数，它接收当前state和一个action对象，在必要时决定如何更新状态，并返回新状态(state, action) => newState
您可以将 reducer 视为事件侦听器，它根据接收到的action.type（事件）类型处理事件。
reducer函数必须始终遵循一些特定规则：
1. 应该只根据state和action参数计算新的状态值
2. 不允许修改现有的state的值
3. 他们不得执行任何异步逻辑、计算随机值或导致其他“副作用”
注意：一个应用程序应该只有一个根reducer 函数
function counterReducer(state = 0, action) {
//根据action.type（事件）来书写逻辑
if (action.type === 'counter/increment') {
return {
...state,
value: state.value + 1
}
}
return state
}
store 是一个 JavaScript 对象，具有一些特殊的功能和能力，使其不同于普通的全局对象：
你绝不能直接修改或更改保存在 Redux 存储中的状态
修改state更新的唯一方法是创建一个action对象，然后调用store.dispatch(action)将action分派到store中以告诉它发生了什么。
action 被调度时，store 运行 root reducer函数，并让它根据旧state和 action 计算新状态
最后，store 通知订阅者状态已更新，以便 UI 可以使用新数据进行更新。
方法一：使用redux创建store
const store = Redux.createStore(counterReducer)
方法二：使用Redux Toolkit创建store
import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({ reducer: counterReducer })
dispatch函数就是根据行为动作分派任务，更改数据
store.dispatch(action)返回action对象，不过，中间件可能会扰乱返回值。
//action创建函数
const increment = () => {
return {
type: 'counter/increment'
}
}
//将action对象传入
store.dispatch(increment())
const unsubscribe= store.subscribe（callback）
unsubscribe（） //取消监听
console.log(store.getState())
// {value: 2}
其他api请见官网
Selectors函数是知道如何从存储状态值中提取特定信息片段的函数。随着应用程序越来越大，这可以帮助避免重复逻辑，因为应用程序的不同部分需要读取相同的数据:
const selectCounterValue = state => state.value
const currentValue = selectCounterValue(store.getState())
console.log(currentValue)
// 2
将所有reducer合并成一个根reducer
手动合并
import todosReducer from './features/todos/todosSlice'
import filtersReducer from './features/filters/filtersSlice'
const initState ={
todos:null,
filters:null
}
export default function rootReducer(state = {}, action) {
// 返回新的状态
return {
// the value of `state.todos` is whatever the todos reducer returns
todos: todosReducer(state.todos, action),
// For both reducers, we only pass in their slice of the state
filters: filtersReducer(state.filters, action)
}
}
使用combineReducers合并
import { combineReducers } from 'redux'
import todosReducer from './features/todos/todosSlice'
import filtersReducer from './features/filters/filtersSlice'
const rootReducer = combineReducers({
// Define a top-level state field named `todos`, handled by `todosReducer`
todos: todosReducer,
filters: filtersReducer
})
export default rootReducer
Middleware函数内部实际上就是替换了store中的dispatch、getState和subscribe方法
一般情况，我们只需自定义dispatch，来增强一些功能
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducer'
import { print1, print2, print3 } from './exampleAddons/middleware'
const middlewareEnhancer = applyMiddleware(print1, print2, print3)
// Pass enhancer as the second arg, since there's no preloadedState
const store = createStore(rootReducer, middlewareEnhancer)
export default store
“thunk”是一个编程术语，意思是“执行一些延迟工作的一段代码”。
thunk函数接受store对象中的dispatch, getState方法作为参数，应用程序代码不会直接调用Thunk函数。相反，它们被传递给store.dispatch()
一个thunk函数可以包含任何任意的逻辑，sync或async，并且可以在任何时候调用dispatch或getState。
const thunkFunction = (dispatch, getState) => {
// logic here that can dispatch actions or read state
}
store.dispatch(thunkFunction)
// fetchTodoById is the "thunk action creator"
export function fetchTodoById(todoId) {
// fetchTodoByIdThunk is the "thunk function"
return async function fetchTodoByIdThunk(dispatch, getState) {
const response = await client.get(`/fakeApi/todo/${todoId}`)
dispatch(todosLoaded(response.todos))
}
}