大家好,又见面了,我是你们的朋友全栈君。
简介
这次要总结的是对 store 和 reducer 的拓展,比如发送异步的 action 操作,还有一个就是对多个 reducer 的管理。
首先来总结一下 react-redux 的使用:
1. 下载 react-redux 和 redux 到项目中。
2. 引入 createStore 并且创建 store 。
<!-- reducer -->
function handleUser(state = [], action) {
switch (action.type) {
case 'ADD_USER':
state.push(action.user)
return [...state];
case 'DELETE_USER':
state.splice(action.payload, 1);
return [...state];
default:
return state
}
}
export { handleUser };
<!-- store -->
import { createStore } from 'redux';
import { handleUser } from '../Reducer/handleUser';
const store = createStore(handleUser);
export { store };
复制代码
3. 在 index.js 引入 store ,并且引入 Provider 并且将 store 传递给它。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './Redux/Store/store';
import * as serviceWorker from './serviceWorker';
import './assets/_reset.scss';
// 引入页面
import { UserContainer } from './Pages/UserContainer';
ReactDOM.render(
<Provider store={ store }>
<UserContainer />
</Provider>,
document.getElementById('root')
)
复制代码
4. 在 UI组件 中使用 connect 获取当前状态和使用 dispatch 发送 action 。
<!-- action -->
const addUser = (user) => ({
type: 'ADD_USER',
user: user
})
const deleteUser = (index) => ({
type: 'DELETE_USER',
index: index
})
export { addUser, deleteUser };
<!-- pages -->
import { addUser, deleteUser } from '../Redux/Action/addUserData';
const mapStateToProps = (state) => {
return {
userList: userList
}
}
const mapDispatchToProps = (dispatch) => {
return {
addUserData: (user) => {
return dispatch(addUser(user))
},
deleteUserData: (index) => {
return dispatch(deleteUser(index))
}
}
}
UserContainer = connect(mapStateToProps, mapDispatchToProps)(UserContainer);
复制代码
以上就是 react-redux 的使用,下面继续拓展其他使用方式。
combineReducers
combineReducers 是 redux 提供的一个方法,调用这个方法并且传入多个 reducer ,然后对这些 reducer 进行管理:
import { combineReducers } from 'redux';
import { handleUser } from './handleUser';
<!-- 写法一 -->
const chatReducer = combineReducers({
userList: handleUser,
<!-- ...这里可以写更多 reducer -->
})
<!-- 写法二 -->
const chatReducer = combineReducers({
handleUser,
<!-- ...这里可以写更多 reducer -->
})
export { chatReducer };
复制代码
上面的 combineReducers 传入的对象有两个写法,但是每个写法最终呈现的名字必须要与 state 一样:
const mapStateToProps = (state) => {
return {
<!-- 这时 state 返回的是一个对象,里面返回各个 reducer 返回的 state -->
userList: state.userList
}
}
复制代码
还有一点就是 store 设置默认值的问题。
<!-- 使用 combineReducers 之前-->
const store = createStore(
handleUser,
state
)
<!-- 使用 combineReducers 之后-->
const store = createStore(
chatReducer,
{ userList: state } // 这里参数必须是个对象,而且对象里面的键要和 combineReducers 设置的相同。
)
复制代码
store 可以接受三个参数,第一个参数是 reducer ,第二个参数代表状态默认值,用于覆盖 reducer 的默认状态。
store 的第三个参数
目前的 store 并不具备处理异步 action 的能力,我们可以使用 中间件 来实现这个操作。
applyMiddleware 是 store 的第三个参数,它是一个函数,用来拓展 store ,这个方法来源于 redux 。
- logger
import { createLogger } from 'redux-logger';
const logger = createLogger();
const store = createStore( chatReducer, { userList: defaultUserList }, applyMiddleware(logger));
复制代码
logger 可以在发送 action 时打印状态的变化以及 action 的信息:
- redux-thunk
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
const logger = createLogger();
const store = createStore(
chatReducer,
{ userList: defaultUserList },
applyMiddleware(thunk, logger)
);
复制代码
正常情况下,dispatch 传递的参数只能是对象:
addUserData: (user) => {
return dispatch({
type: 'ADD_USER',
payload: user
})
}
复制代码
使用 redux-thunk 让 dispatch 接受一个函数,让他能够进行异步操作:
addUserData: (user) => {
return dispatch((dispatch, getState)=> {
setTimeout(()=> {
dispatch(addUser(user))
}, 2000)
})
}
复制代码
传递一个函数之后,这个函数可以接受两个参数,一个是 dispatch ,另一个是 getState ,然后在里面进行异步操作,我这里设置了 2秒 然后添加了一个用户,点击之后,过了 2秒 我的用户才会被添加进去,而页面也是等到 2秒 后重新渲染。
这种异步思路就是使用 Action Creator 返回一个函数,然后使用 redux-thunk 让 dispatch 能够接受一个函数作为参数。
- redux-promise
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import promiseMiddleware from 'redux-promise';
const logger = createLogger();
const store = createStore(
chatReducer,
{ userList: defaultUserList },
applyMiddleware(thunk, promiseMiddleware, logger) // 按照严格的循序
);
复制代码
上一种方法是使用 Action Creator 返回函数来操作异步,使用 redux-promise 可以让它返回一个 promise 对象,可以使用 then 来实现后面的操作。
deleteUserData: (index) => {
return dispatch(new Promise((resolve, reject)=> {
setTimeout(()=> {
dispatch(deleteUser(index))
}, 2000)
}))
}
复制代码
使用 redux-promise 让它能够返回一个 使用 promise ,接着我们调用 使用 deleteUserData 函数时就可以执行 then 的操作。
总结
以上三个中间件都是对 store 的拓展,使用 applyMiddleware 并且分别传入三个 中间件 ,传入时必须要遵循顺序,否则会出问题:
applyMiddleware(thunk, promiseMiddleware, logger)
复制代码
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107035.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...