如何用 redux 和 react-router 组织状态？

Posted 2023-03-10

【中文标题】如何用 redux 和 react-router 组织状态？

【英文标题】：How to organize state with redux and react-router?

【发布时间】：2016-01-17 06:22:44

【问题描述】：

Redux 提倡使用具有单一状态的单一存储。但是，使用 react-router 您可以获得多个页面，每个页面都有自己的***根组件。

应该如何将 redux 与具有多个页面的 react-router 应用程序连接起来？ React-router 1.0 不再允许您将 props 传递给路由，因此使路由器成为包含所有页面状态的***组件不再可能，也不可行。

【参考方案1】：

redux-router不再兼容react-router v4，上面的解决方案也行不通。

因此，我建议使用redux-little-router。与 redux-router 不同，它不依赖于 react-router，而是替代它。

使用它，您可以执行以下操作：

从您的异步操作推送到新路由：

export function navigateAbout() 
  return (dispatch) => 
    dispatch(push('/about'))
  

在 redux-dev-tools 中查看您的路由器详细信息（当前路径、查询字符串和参数），并像访问任何其他道具一样从您的存储中访问这些详细信息：

function mapStateToProps(state) 
  return 
    string: state.router.query.string
  

PS。已经实现的redux-little-redux可以参考或使用this react boilerplate

【参考方案2】：

如果您使用的是 redux + react-router，我强烈建议您也使用 redux-router - 这将允许您将路由信息保存在您的商店中 - 我通常有以下设置。

redux-router: ^1.0.0-beta3 / react-router": ^1.0.0-rc1 / redux: "^3.0.2 / 反应：“^0.14.0

//index.js [入口点]

import React from 'react';
import ReactDOM from 'react-dom';
import  Router, Route  from 'react-router';
import  Provider  from 'react-redux';
import createStore from './utils/create-store';
import routes from './bootstrap/routes';
import  ReduxRouter  from 'redux-router';

const store = createStore(routes);

ReactDOM.render(
    <Provider store=store>
        <ReduxRouter>
            routes
        </ReduxRouter>
    </Provider>,
    document.getElementById('root')
);

// create-store.js

import  applyMiddleware, createStore, combineReducers, compose  from 'redux';
import * as reducers from '../reducers/index';
import promiseMiddleware from './promise-middleware';
import  routerStateReducer, reduxReactRouter  from 'redux-router';
import history from './history'

/**
 * Sets up the redux store.  Responsible for loading up the reducers and middleware.
 *
 * @param routes
 */
export default function create(routes) 
    const composedReducers = combineReducers(
        router: routerStateReducer,
        ...reducers
    );
    const finalCreateStore = compose(applyMiddleware(promiseMiddleware),
        reduxReactRouter(
            routes,
            history
        ))(createStore);
    let store = finalCreateStore(composedReducers);
    return store;

// 路由.js

import React from 'react';
import  Route  from 'react-router';
import  App from './app';

module.exports = (
    <Route component=App>
        ...all your routes go here
    </Route>
);

// app.js

import React,  PropTypes  from 'react';
import  connect  from 'react-redux';

export default class App extends React.Component 

    render() 
        const  props:  children   = this;
        return (
            <div className="app-container">
              children
            </div>
        );
    

如您所见，有一个高阶组件包裹了您的其余路线