redux

状态管理工具

npm i redux --save

三大原则

1. 单一数据源
2. state是只读的
3. 使用纯函数来执行修改

 

只读状态的好处：一旦修改状态，必须先拿到状态的副本，在修改，这样的话状态就是可追溯的

在项目中引入

import {createStore} from "redux"

let initState={//状态的初始值

    n:5

}

let reducer=(state=initState,action)=>{

//state  数据

//修改数据的行为

return state

}

let store=createStore(reducer)

expor default store

 

在入口文件引入这个js文件

取值方式  store.getState().n .

 

向仓库里写入数据

抛发动作

动作发给了reducer的第二个参数action

动作是一个对象 这个对象必须含有type属性

store.dispatch({"type":"自定义名字通常大写"，属性名：属性值})

 

 

let initState={//状态的初始值

    n:5

}

let reducer=(state=initState,action)=>{

   if(action.type==="自定义名字"){

    let newState={...state}//浅拷贝 制作副本：纯函数不能直接修改数据

    newState.n=action.属性名

    return newState//返回副本

    上面三句话可缩写为 

    return {...state,n:action.属性名

    }

}

return state

}