react 八、将connected-react-router用于 Redux 绑定

八、将`connected-react-router`用于 Redux 绑定

在前面的章节中，我们研究了如何使用组件的状态来存储模型数据，以及当用户操作更新模型时，React 如何更新视图。在大型应用中，此状态信息不仅应提供给当前组件及其子组件，还应提供给应用树中的其他组件。有各种状态管理库可用于帮助保持用户界面组件与应用状态同步。Redux 就是这样一个库，它使用一个中央数据存储来管理应用的状态。存储作为真相的来源，应用中的组件可以依赖于存储中维护的状态。

在本章中，我们将了解connected-react-router库，它为 React 路由提供 Redux 绑定。本章讨论以下主题：

使用 Redux 进行状态管理 Redux 概念简介
connected-react-router入门
从 Redux 存储读取 react 路由状态
通过调度操作导航到不同的路由

使用 Redux 进行状态管理

如前所述，Redux 使用单个存储来管理应用的状态。除了Store之外，还有两个构建块：Actions和Reducers

让我们来看看这些构建块是如何帮助保持“t0 t0”的，并在当 To.T2 改变时，更新视图。

行动

操作允许您定义用户可以执行的操作，以更新应用的状态。一个动作是一个{ type, payload }形状的 JavaScript 对象，其中type是一个提及用户动作的字符串，payload是应该更新状态的数据：

let todoId = 0;
export const addTodo = text => ({
    type: 'ADD_TODO'
    payload: {
        text,
        id: todoId++,
        isCompleted: false
    }
})

这里，addTodo操作接受 TODO 文本并指示该操作用于将 TODO 添加到 TODO 列表。payload这里是一个包含 TODOtext、TODOID和布尔标志isCompleted（设置为 false）的对象。也可以有不需要包含payload属性的操作。例如，考虑下面的动作：

export const increment = () => ({
    type: 'INCREMENT'
})

这里，action类型INCREMENT表示实体的值必须增加 1。前面的action不需要payload属性，可以根据动作类型更新实体的状态

还原剂

Redux 中的 Reducer 根据发送到存储的操作更改实体的状态。Reducer 是一个纯函数，它接受两个参数：state和action。然后，减速器根据action.type中存储的值返回更新状态。例如，考虑以下减速器：

const todoReducer = (state = [], action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return [
                ...state,
                {
                    id: action.payload.id,
                    text: action.payload.text,
                    isCompleted: action.payload.isCompleted
                }
            ];
        default:
            return state;
    }
}

todoReducer的初始状态设置为空数组（状态参数的默认值），当动作类型为ADD_TODO时，列表中添加 TODO。Redux 的核心原则之一不是改变状态树，而是作为组件调度的操作的结果返回一个新的状态树。这有助于保持 reducer 函数的纯粹性（即没有副作用），并有助于在 React 组件重新渲染视图元素时识别新的状态更改。

类似地，可能会有多个操作更新 TODO 状态（例如MARK_COMPLETED和DELETE），并且 reducer 可以根据发送到存储的操作类型更改 TODO 列表的状态。

百货商店

Store 是可以从中派生应用状态的中心数据对象。应用中的组件订阅存储状态的更改并更新视图。

以下是 Redux 中数据的流动方式：

用户执行一项操作，例如提交表单或单击按钮，从而向存储区发送操作。应用定义了用户可以执行的各种操作，并对 reducer 进行了编码，以便它可以处理这些操作并更新实体的状态。应用中各种实体的状态保存在一个中心位置：存储。例如，应用可以有各种实体，如 Todo 和用户配置文件，存储将维护这些实体的状态信息。每当 reducer 更新存储中特定实体的状态值时，用户界面组件都会从存储接收更新，更新组件的状态信息，并使用更新的状态重新呈现视图。

反应中的再聚合

使用create-react-appCLI 创建项目后，包括依赖项redux和react-redux依赖项：

npm install --save redux react-redux

redux库包括createStore、combineReducers、bindActionCreators、applyMiddleware和compose助手函数；而react-redux库包含 Redux 绑定，帮助您的 React 组件与 Redux 存储进行通信。

下一步是定义用户可以从用户界面启动的操作。在我们的示例中，我们将创建一个Counter组件，该组件可以increment和decrement计数器值。

在actions/counter.js中：

export const increment = () => ({
    type:'INCREMENT'
});

export const decrement = () => ({
    type: 'DECREMENT'
});

为我们的反实体定义操作后，需要定义更新counter状态的reducer：

在reducers/counter.js中：

const counterReducer = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}

export default counterReducer;

此处定义的reducer根据用户触发的action类型更新state值。类似地，应用中可以有各种简化程序和操作，在用户触发某个操作时更新实体的状态。

redux中的combineReducers实用程序允许您将所有减速器组合成一个减速器，然后可在initializing应用商店中使用。

在reducers/index.js中：

import { combineReducers } from 'redux';
import counterReducer from './counter';

const rootReducer = combineReducers({
    count: counterReducer,
    todo: todoReducer
});

export default rootReducer;

使用combineReducers函数创建一个rootReducer，该函数接受一个对象，该对象具有实体和减缩器的键值映射。这里，counterReducer被分配给count实体，todoReducer被分配给具有todo键的实体。

然后在createStore函数中使用rootReducer创建存储。

在index.js中：

import { createStore } from 'redux';

const store = createStore(
    rootReducer
);

使用react-redux库中定义的<Provider>组件，应用中的组件可以使用存储：

ReactDOM.render(
    <Provider store={store}>
        <Counter />
    </Provider>,
    document.getElementById('root')
);

应用中的组件现在可以使用connect高阶函数订阅存储中实体（count和todo中的状态更改。创建一个Counter组件，该组件将显示count的当前状态值，并将分派我们在actions/counter.js中定义的increment和decrement动作。

在components/counter.component.js中：

import { increment, decrement } from '../actions/counter';
const Counter = ({ count, increment, decrement }) => (
    <div>
        <h4>Counter</h4>
        <button onClick={decrement}>-</button>
        <span>{count}</span>
        <button onClick={increment}>+</button>
    </div>
)

count、increment和decrement道具可从store使用以下connect方法获得：

import { connect } from 'react-redux';
import { increment, decrement } from '../actions/counter';

...

const mapStateToProps = state => ({
    count: state.count
});

const mapDispatchToProps = dispatch => ({
    increment: () => dispatch(increment()),
    decrement: () => dispatch(decrement())
})

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

来自react-redux的connect高阶函数有助于将 Redux 状态注入 React 组件。connectHOC 接受两个参数：mapStateToProps和mapDispathToProps。正如所观察到的，Redux statecount属性被分配给mapStateToProps中组件的 statecount属性，类似地，组件可以使用mapDispatchToProps中指定的increment和decrement动作向存储区发送动作。这里，为了从 Redux 存储读取状态值，使用mapStateToProps，并且connect向组件提供整个状态树，以便组件可以从状态树中的各种对象读取。为了改变树的状态，mapDispatchToProps帮助分派在存储中注册的操作。connectHOC 提供了dispatch方法，以便组件可以调用存储上的操作。

开始使用已连接的路由

connected-react-router库为 React 路由提供 Redux 绑定；例如，应用的历史记录可以从 Redux 存储读取，您可以通过向存储分配操作导航到应用中的不同路由。

我们先用npm安装connected-react-router和其他库：

npm install --save connected-react-router  react-router  react-router-dom  history

接下来，我们将更新存储设置

在index.js中：

import { applyMiddleware, createStore, compose } from 'redux';
import { ConnectedRouter, connectRouter, routerMiddleware } from 'connected-react-router';

const history = createBrowserHistory();

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
    connectRouter(history)(rootReducer),
    composeEnhancer(applyMiddleware(routerMiddleware(history)))
);

createStore函数具有以下签名：

createStore(reducer, preloadedState, enhancer)

它接受三个参数：第一个参数是reducer函数，它返回给定当前状态树和要处理的操作的下一个状态树；第二个参数指定应用的初始state，应该是与combineReducers中使用的形状相同的对象；第三个参数指定存储区enhancer，它为存储区添加了更多功能，如时间旅行、持久性等

在我们的示例中，第一个参数如下所示：

connectRouter(history)(rootReducer)

来自connected-react-router的connectRouter包裹rootReducer并返回一个包含router状态的新根还原剂。connectRouter减速机响应类型为@@router/LOCATION_CHANGE的操作以更新路由状态。注意，connectRouter接受history对象作为其参数；connectRouter然后使用历史对象使用location和action属性初始化路由状态。

createStore的第二个参数是增强子：

composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
...
composeEnhancer(applyMiddleware(routerMiddleware(history)))

请注意，我们将enhancer指定为第二个参数。如果第二个参数是函数且未指定第三个参数到createStore，则createStore方法将第二个参数标记为enhancer。redux中的compose实用程序返回通过从右向左组合给定函数获得的函数。在前面的例子中，我们正在检查浏览器中是否有Redux Devtools Extension可用，这使您能够查看应用中各种实体的状态

connected-react-router中定义的routerMiddleware是一个中间件函数，用于使用提供的history对象重定向用户。如果调度了'CALL_HISTORY_METHOD'类型的操作，中间件功能将通过调用history对象上的其中一个方法，将用户导航到请求的路由。它还防止操作（CALL_HISTORY_METHOD到达应用中定义的其他还原程序以及routerMiddleware之后定义的中间件组件

Redux 中的applyMiddleware实用程序用于创建存储增强器，该增强器将中间件应用于 Redux 存储的调度方法。

下一步是使用<Provider>组件使应用中的组件可以使用存储（使用createStore创建）：

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <App />
        </ConnectedRouter>
    </Provider>,
document.getElementById('root'));

这里，我们将应用根组件包装在<ConnectedRouter>组件中，而<ConnectedRouter>组件又包装在<Provider>组件中。这是必需的，因为ConnectedRouter订阅router状态中的更改，以查看location属性是否已更改，然后调用history.push方法将用户导航到请求的路由。

通过这些更改，应用中的组件现在可以从存储中读取状态信息，并且还可以分派操作以导航到应用中定义的各种路由。

从 Redux 存储读取状态信息

为了测试前面的设置，我们首先在导航栏中创建一个<Link>组件和一个具有相同路径名的对应<Route>：

<Link
    to={{
        pathname: '/dashboard',
        search: 'q=1',
        hash: 'test',
        state: { key: 'value' }
    }}
>
    Dashboard
</Link>
...
<Route path='/dashboard' component={Dashboard} />

注意，<Link>组件指定了具有pathname、search、hash和state属性的to对象。我们将从呈现组件中的 Redux 存储中读取此信息：

const Dashboard = ({ pathname, search, hash, state, count }) => {
    return (
        <div>
            <h4>In Dashboard</h4>
            <div> Pathname   : {pathname} </div>
            <div> Search     : {search} </div>
            <div> Hash       : {hash} </div>
            <div> State-Key  : {state? state.key : null} </div>
        </div>
    )
}

const mapStateToProps = state => ({
    pathname: state.router.location.pathname,
    search: state.router.location.search,
    hash: state.router.location.hash,
    state: state.router.location.state
});

export default connect(mapStateToProps)(Dashboard);

从这个代码片段中，pathname、search、location和hash属性从state.router.location中读取。如前所述，connectRouter函数创建router状态，并在调度LOCATION_CHANGE类型的操作时更新该值。当您尝试使用<Link>组件导航时，<ConnectRouter>组件侦听历史对象中的更改，然后发送LOCATION_CHANGE操作

如果您在 Chrome 中安装了 Redux Dev 工具（可在 Chrome Web Store 中找到），则当您尝试从一条路由导航到另一条路由时，可以观察到已调度的操作：

在这个 Dev Tools 窗口中，当您尝试导航时，@@router/LOCATION_CHANGE操作被调度，下面部分中的操作显示了调度该操作时提供的有效负载

通过调度操作导航

connected-react-router库提供了可以从组件中分派的操作，以导航到应用中定义的路由。其中包括push、replace、go、goBack和goForward。这些方法调用历史对象上的相应方法以导航到指定路径。

上例中的DashboardComponent现在可以更新为使用mapDispatchToProps：

import {push, replace} from 'connected-react-router';

const Dashboard = ({ pathname, search, hash, state, count, push, replace }) => {    
    return (
        ...
<button onClick={() => {push('/')}}>HOME</button>
        <button onClick={() => {replace('/counter')}}>COUNTER</button>
        ...
    )
}

const mapStateToProps = state => ({
...
});

const mapDispatchToProps = dispatch => ({
    push: (path) => dispatch(push(path)),
    replace: (path) => dispatch(replace(path))
});

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

现在，当您分别单击 HOME 和 COUNTER 按钮时，前面的组件将发送push和replace操作。mapDispatchToProps函数使您能够向商店分派操作，在我们的示例中，push和replace函数接受pathname来分派操作。

总结

在本章中，我们了解了如何使用 Redux 库创建一个存储来管理应用中的各种状态实体。存储区接收动作，当动作被调度时，还原程序改变应用的状态。connected-react-router库为 React Router 提供 Redux 绑定，它包括一个高阶函数connectRouter，它包装rootReducer并创建router状态。然后在createStore功能中使用connectRouter功能，使router状态可用于应用中的组件。

connected-react-router中的<ConnectedRouter>组件监听history位置的变化，并发送LOCATION_CHANGE动作来更新router状态属性。然后，呈现的路由组件可以通过从存储中读取状态信息来读取该router状态属性

该库还包括push、replace、go、goBack和goForward动作，组件可以通过这些动作导航到应用中定义的路由。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/10797.html

react 查看更多书籍

《React 路由快速启动指南》

分类

最近更新

react 八、将connected-react-router用于 Redux 绑定

八、将`connected-react-router`用于 Redux 绑定

使用 Redux 进行状态管理

行动

还原剂

百货商店

反应中的再聚合

开始使用已连接的路由

从 Redux 存储读取状态信息

通过调度操作导航

总结

留言

联系客服

数据知识

系统公告

开发文档

react查看更多书籍

《React 路由快速启动指南》

react 八、将connected-react-router用于 Redux 绑定

八、将connected-react-router用于 Redux 绑定

使用 Redux 进行状态管理

行动

还原剂

百货商店

反应中的再聚合

开始使用已连接的路由

从 Redux 存储读取状态信息

通过调度操作导航

总结

留言

联系客服

react 查看更多书籍

八、将`connected-react-router`用于 Redux 绑定