React
是我们的视图框架,但在大型项目开发的时候需要公用的数据状态是很难管理的,有明显父子关系的组件还比较方便传递值,但没关系的组件传值是非常麻烦的,这时候就需要用到我们的状态管理库Redux
,该文章会讲解在实际React
项目开发中redux + react-redux + redux-thunk
组合应用,这也是我们现在企业项目开发中最常用的搭配,让你能够快速应用起来!
一、Redux 介绍
Redux
是搭配 React
项目开发中最常用的状态管理库,大家知道在我们 React
项目开发时,组件的公用数据状态(如用户信息等),可能多组件都会用到,如果组件间的关系比较明确(如父子关系),传递还比较方便,但如果关系不明确或者毫无关系,这时候就非常麻烦了,但借助我们的Redux
可以把这些状态存到Redux
的store
中,哪个组件需要就去store
里面取,哪个组件想要改变store
,就去调取相应的action
,action
会触发reducer
改变store
,这样每个组件的store
都会改变。
二、Redux 安装
npm i redux react-redux redux-thunk
这里我们一次安装了三个库:
redux
:核心库,完成store
数据状态管理,reducer
(触发会返回新的store
替换老的store
)管理,action
(reducer
我们不能直接触发,需要调用action
来触发reducer
)管理。
react-redux
:用来简化在React
中使用Redux
的流程,其中Provider
提供器,全局提供store
状态,connect
连接器,需要store
状态的用他来连接。
redux-thunk
:使redux
的action
能够写异步方法,本身action
中是不能写异步方法的,用了redux-thunk
才可以。
三、创建store相应文件(store、reducer、action、action-type)
在项目src目录中创建相应目录和文件
store/index.js
:创建store
,并把reducer
传入作为第一个参数,应用中间件redux-thunk
作为第二个参数,具体代码如下
import { createStore, applyMiddleware } from "redux";
import reducer from "./reducer";
import thunk from "redux-thunk";
const store = createStore(reducer, applyMiddleware(thunk));
export default store;
store/reducer.js
:创建了一个count
的reducer
,每次触发action
的时候会把传过来的值作为第二个参数,第一个参数为老的state
,reducer
执行完毕返回新的state
会替换老的state
,其中我们还引入redux
的combineReducers
是用来合并多个reducer
最终返回一个集成的reducer
import { combineReducers } from "redux";
import { COUNT_ADD, COUNT_REDUCE } from "./action-type";
const initCount = {
count: 0,
};
function count(state = initCount, action) {
switch (action.type) {
case COUNT_ADD:
return state.count + 1;
case COUNT_REDUCE:
return state.count - 1;
default:
return state;
}
}
export default combineReducers({
count,
});
store/action.js
:每次我们想要改变store
,都需要先触发action
,另外我们用了redux-thunk
后。可以在action
中执行异步方法(如ajax数据请求等),action去触发reducer
发生store
的改变。在此示例中,我的action
比较简单,实际中大家的可能比较复杂,但是原理相同,一个action
方法,执行相应逻辑(如ajax请求,或逻辑判断等),最后返回一个action
对象,reducer
会根据action
对象的type
和data
来执行相应的store
更改
import { COUNT_ADD, COUNT_REDUCE } from "./action-type";
export const receiveCountAdd = () => ({ type: COUNT_ADD });
export const receiveCountReduce = () => ({ type: COUNT_REDUCE });
store/action-type.js
:这里面是我们相应action
对象的type
,为什么我要做这么一个步骤,因为我们需要在action.js
传递action
对象的时候加上他,也要在reducer.js
判断相应的type
,避免因为type
比较长比较复杂,两边不一致,程序也不会报错(因为reducer
判断没有相应type
就会走default
),所以我们设置一个常量作为type
// count自增
export const COUNT_ADD = 'COUNT_ADD'
// count自减
export const COUNT_REDUCE = 'COUNT_REDUCE'
到此我们相应的store
就整体创建完毕,接下来就是在相应组件中使用它了。
四、组件中接收store
及触发action
改变store
在此之前我们要在全局用react-redux
的Provider
全局提供store
状态,这里我们直接在index.js
中使用它,并把store
传递给他的属性store
import React from "react";
import ReactDOM from "react-dom";
import App from "./views/App";
import { Provider } from "react-redux";
import store from './store'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
接下来我们就可以在组件中使用connect
连接器获取我们需要的store
以及相应的action
了,首先引入connect
和我们创建的相应action
:receiveCountAdd
,在暴露组件的使用connect
,它是一个高阶函数(执行函数返回一个函数),执行第一个函数时有两个参数(第一个为需要接收的state
,这里我们是count,第二个为action
,这里用的es6写法),第二个函数再传入我们的组件名,做此步骤后,我们需要的store
和action
就会挂载到我们的props
上,然后我们获取或者执行就非常简单了(见useEffect
中)
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { receiveCountAdd } from "../../store/action";
function Article(props) {
useEffect(() => {
props.receiveCountAdd();
console.log(props.count);
}, []);
return <div>文章信息</div>;
}
export default connect(
(state) => ({ count: state.count }),
{ receiveCountAdd },
)(Article);
至此,Redux + React-Redux + Redux-Thunk 在 React 实际项目开发中使用详解就讲解完毕了,如果有不太明白的小伙伴,可以留言哦!