react-redux - 在 react 和 redux 中使用 routerMiddleware 函数
问题描述
如何使用 routerMiddleware 将历史记录传递给 redux。我在下面尝试过但没有工作。我找不到任何集成 routerMiddleware 的资源。在这里,我正在尝试响应管理仪表板,它要求将历史记录作为道具传递给 redux 存储。所以我试图使用 routeMiddleware 来传递历史道具。
import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import { routerMiddleware, connectRouter } from 'connected-react-router'
import { createBrowserHistory } from 'history'
import { postListReducer } from './reducers/postReducers'
const history = createBrowserHistory()
const reducer = combineReducers({
postList: postListReducer,
router: connectRouter(history),
})
const initialState = { postList: { posts: [] } }
const middleware = [thunk, routerMiddleware(history)]
const store = createStore(
reducer(history),
initialState,
composeWithDevTools(applyMiddleware(...middleware))
)
export default store
减速机:
import {
POST_LIST_REQUEST,
POST_LIST_SUCCESS,
POST_LIST_FAIL,
POST_CREATE_REQUEST,
POST_CREATE_SUCCESS,
POST_CREATE_FAIL,
} from '../constants/postConstants'
export const postListReducer = (state = { posts: [] }, action) => {
switch (action.type) {
case POST_LIST_REQUEST:
return { loading: true }
case POST_LIST_SUCCESS:
return {
loading: false,
posts: action.payload,
}
case POST_LIST_FAIL:
return { loading: false, error: action.payload }
default:
return state
}
}
解决方案
推荐阅读
- java - 如何从 react-native 本机模块访问子级?
- java - 如何通过旋转而不重复方向来计算立方体的所有方向?
- python - 如何为 LSTM 和 Keras 构建面板数据?
- python - 加快 for 循环下的嵌套 if 循环
- javascript - 删除动画子节点的动画迭代事件侦听器
- javascript - Axios 未在 Vuex 商店中正确设置 - Vue.js 和 Electron
- mysql - 一列是多个复合 FK 约束的一部分,是否有效且良好的设计决策?
- db2 - 如何计算数据为十进制时的时间差异?
- sql - SQL JOIN 将多个项目返回到 1 行
- debugging - 当消息不被理解时,Pharo 如何启动调试器?