Redux 状态管理

Redux

3个核心概念

❗ 提示

• Store 存储state，和reducer
• Action 被派发出去的更新，是一个包含了action type的对象，派发到reducer函数中去处理逻辑
• Reducer 用于合并action和state，是一个纯函数，每次返回一个新的state，在函数中去处理每一个类型的action的具体逻辑 把action的类型抽取到常量中，确保reducer和action对应的type一致，实际上type也仅仅是一个标识作用

Redux flow

redux使用流程

//1. 创建store
// store/index.js
import { createStore } from "redux";
import reducer from "./reducer";

export const store = createStore(
    reducer
)

//2. 创建reducer
// store/reducer.js
import * as actionTypes from './constant'
const initState = {
    count: 1
}

export default reducer = (state = initState, action) => {

    switch (action.type) {
        case actionTypes.ADD_NUMBER:
            return { ...state, count: state.count + 1 }
        case actionTypes.SUB_NUMBER:
            return { ...state, count: state.count - 1 }
        default:
            return state
    }
}

// 3. 创建action函数,本质上是为了方便的创建action，直接使用对一个action对象也可以
// store/actionCreator.js
import * as actionTypes from './constant'

export const addNumberAction = (count)=>({
    type:actionTypes.ADD_NUMBER,
    count, 
})
export const subNumberAction = (count)=>({
    type:actionTypes.SUB_NUMBER,
    count, 
})

// 4.抽取常量
// store/constant.js
export const ADD_NUMBER = 'add_num'
export const SUB_NUMBER = 'sub_num' 

//5. 业务使用
// 在组件中，派发action
import {addNumberAction } from './store/actionCreator'
import store from './store'

store.dispatch(addNumberAction(2))