文章目录
前言
-
Redux是为javascript应用程序提供一个可预测(根据一个固定的输入,必然会得到一个固定的结果)的状态容器。可以运行于服务端,客户端,原生应用,从Flux演变而来。简单容易上手
-
集中的管理react中多个组件的状态
-
redux是专门作状态管理的js库,并不是react的插件库,也可以用在其他js框架中,例如vue,但是基本用在react中
-
可以同一个地方查询状态,改变状态,传播状态,用在中大项目。如下场景:组件状态需要共享,在任何地方都可以拿到,组件需要改变全局状态,一个组件需要改变另外一个组件的状态。创建store实例,其它组件导入并共享这个store实例
一、redux
1.redux三大原则
1)、单一数据源
2)、State 是只读的
3)、使用纯函数来执行修改
2.redux的安装
安装稳定版:
npm install --save redux
yarn add redux
附加包:多数情况下,你还需要使用 React 绑定库和开发者工具。
npm install --save react-redux
npm install --save-dev redux-devtools
3.redux成员
4.store成员
5.数据流动
6.redux操作流程
//安装:
yarn add redux
//一、创建reducer
// 参数:
// state:原始的state
// action:要做的事情,动作的类型
// 返回值:必须要有,是新的state(修改后的state)。getState()函数会调用reducer
// reducer要求是个纯函数(在函数内部不能修改函数的参数(输入),要有返回值)
//通过组件修改store中的state(数据)),修改store中的state(数据)后,还需要把数据响应到组件上,就需要使用 subscribe。
//它的功能是:传入旧的state,根据action对state做操作,返回新的state。
import {
createStore} from 'redux'
const reducer = (state,action)=>{
let {
type,payload}=action
swtich (type){
case XXXXX :{
//数据的逻辑处理
return {
...state,
属性名:新的值
}
}
default:
return state
}
}
//二、创建state对象
// 仓库里的数据
export default {
count:0
}
//三、创建store对象(仓库)
//使用createStore(对仓库的操作,仓库的数据)
//创建仓库时,需要说清楚仓库中存储的数据(state),以及对数据的操作(reducer)
store = createStore(reducer,state)
export default store;
//四、在组件内部使用仓库(如:获取仓库的数据,修改仓库的数据,添加,删除)
import store from '...'
store.getState() //获取状态,执行一次
store.dispatch({
type:xxx,payload:ooo}) //发送action给reducer type是必传参数
store.subscribe(回调) //订阅 state 更新state时触发
7.action里处理异步
需要安装中间件 redux-thunk ,redux-thunk可以增强dispatch的功能,让dispatch可以接受一个函数作为参数。
./src/plugins/redux.js
//安装中间件改装 redux
import {
createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
let store = createStore(reducer,state,applyMiddleware(thunk));
./src/store/actionCreators