1、引入react-redux，redux, redux-thunk, redux-persist
npm install react-redux redux redux-thunk redux-persist,
其中redux-thunk是一个中间件说的是可以提供异步派遣action，redux-persist数据持久化存储
2、项目入口文件index.js
// Provider是react-redux两个核心工具之一，作用：将store传递到每个项目中的组件中
// 第二个工具是connect，稍后会作介绍
import { Provider } from 'react-redux'
// 引入创建好的store实例
import store, { persistor } from './store/index';
import { PersistGate } from 'redux-persist/integration/react';
ReactDOM.render(
<React.StrictMode>
<Provider store = {store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
3、src目录下创建store文件夹
3.1 store/index.js 文件
// applyMiddleware: redux通过该函数来使用中间件
// createStore: 用于创建store实例
import { applyMiddleware, createStore } from "redux";
// 中间件，作用：如果不使用该中间件，当我们dispatch一个action时，需要给dispatch函数传入action对象；但如果我们使用了这个中间件，那么就可以传入一个函数，这个函数接收两个参数:dispatch和getState。这个dispatch可以在将来的异步请求完成后使用，对于异步action很有用
import thunk from 'redux-thunk'
// 引入reducer
import reducers from './reducers.js'
import { persistStore, persistReducer } from 'redux-persist' // 用来避免刷新导致store重置
import storage from 'redux-persist/lib/storage'; //将redux保存到localstorage中
// import storage from 'redux-persist/lib/storage/session'; //将redux保存到sessionstorage中
const myReducer = persistReducer({
key: 'root',
storage
}, reducers)
const store = createStore(
myReducer,
applyMiddleware(thunk)
)
export const persistor = persistStore(store);
export default store
3.2 store/action.js 文件
export function setUserInfo (data) {
return (dispatch, getState) => {
dispatch({ type: 'SET_USER_INFO', userInfo: data })
}
}
3.3 store/state.js 文件
export default {
userInfo: {}
}
3.4 store/reducers.js文件
// 工具函数，用于组织多个reducer，并返回reducer集合
import { combineReducers } from "redux";
// 默认值
import defaultState from "./state";
// 一个reducer就是一个函数
console.log(defaultState.userInfo, '**************')
function userInfoReducers(state = defaultState.userInfo, action) {
// 不同的action有不同的处理逻辑
switch (action.type) {
case 'SET_USER_INFO':
return action.userInfo
default:
return state
}
}
// 导出所有reducer
export default combineReducers({
userInfo: userInfoReducers
})
4、src下创建views文件夹用来存放组件
4.1 views文件下创建userInfo.jsx文件
import React from 'react'
import { connect } from "react-redux"
import { setUserInfo } from "../store/actions";
function UserInfo({userInfo, setUserInfo}) {
const changeUserInfo = () => {
setUserInfo({name: '1', age: 20, sex: '女'})
}
return <div>
我是一个用户信息组件
<h1>用户名称：{userInfo.name}</h1>
<h2>性别：{userInfo.sex}</h2>
<h2>年龄：{userInfo.age}</h2>
<button onClick={changeUserInfo}>修改信息</button>
</div>
}
// mapStateToProps：将state映射到组件的props中
const mapStateToProps = (state) => {
console.log(state, '当前的state是什么')
return {
userInfo: state.userInfo
}
}
// mapDispatchToProps：将dispatch映射到组件的props中
const mapDispatchToProps = (dispatch) => {
return {
setUserInfo (data) {
dispatch(setUserInfo(data))
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(UserInfo);
4.2 在app.js文件中引入userInfo组件
import './App.css';
import UserInfo from "./views/userInfo.jsx";
function App() {
return (
<div className="App">
<UserInfo></UserInfo>
</div>
);
}
export default App;
具体使用看views/userInfo.jsx中的调用，以上为react-redux简单使用，整理一下。
网友评论