react知识总结_六年级教学工作总结个人
大家好，又见面了，我是你们的朋友全栈君。
简介
这次要总结的是对 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)
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/107035.html原文链接：https://javaforall.cn
腾讯云开发者
