Redux使用

目录

1，redux的工作流程

2.安装redux

 3.redux概念了解

4.创建Redux中的仓库-store和reducer

5.redux中间件( Redux-thunk)

 安装

6.combineReducers使用

---

 

1，redux的工作流程

 

2.安装redux

npm i redux --save

 3.redux概念了解

redux是一个专门用于做状态管理的js库（不是react插件库）

可以用在react，angular，vue项目中，基本与react配合使用

作用：集中式管理react应用中多个组件共享的状态

4.创建Redux中的仓库-store和reducer

首先，创建一个store文件夹，然后创建一个index.js文件，再创建一个reducer.js文件

import { createStore } from "redux";
//引入reducer文件
import reducer from './reducer'
let store=createStore(reducer)
export default store

reducer.js文件

const defaultState={
    value：‘张三’,
    list:[
       '您好',
       'hello' 
    ]
}
//业务逻辑可以写这里
export default (state=defaultState,action)=>{
    return state
}

这样，简单的store和reducer就搭建好了，现在我们在组件中使用store仓库

首先进行引入

import store from './store'

然后我们可以打印一下store，打印结果如下，他有一个getState()方法

 然后在页面渲染我们getState里面的值即可

注：reducer只能接收state,不能改变state

5.redux中间件( Redux-thunk)

 安装

npm i redux-thunk --save

配置

import { createStore,applyMiddleware } from "redux";
import thunk from 'redux-thunk'
//引入reducer文件
import reducer from './reducer'
let store=createStore(reducer，applyMiddleware(thunk))
export default store

creatStore只能接收两个参数，如果想要定义多个参数，我们可以使用增强函数(compose)

异步处理写在中间件Redux-thunk中

解决异步action不能使用function方法，如果我们不使用中间件，那么我们如果在action中使用函数，那么他会进行报错

6.combineReducers使用

作用：合并多个reducer函数

redux的combineReducers()可以方便的将redux的reducer拆分为各个小的reducer文件，统一调用各自的reducer，方便统一管理

creatStore只能接收两个参数，如果想要定义多个参数，我们可以对多个reduce进行合并，使用combineReducers

import { createStore,applyMiddleware,combineReducers } from "redux";
import countReduce  from '../reduces/count_reduce'   
import todoReduce from '../reduces/todolist_reduce'
import thunk from 'redux-thunk'
// 使用redux官方提供的合并reduce方法
const allReducer = combineReducers({
    count:countReduce,
    todolist:todoReduce
})
// 第一个参数为全部reduce，第二个参数为使用支持异步action的中间件
let store = createStore(allReducer,applyMiddleware(thunk))
export default store