如何react中使用redux和react-redux

Redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。

不仅于此，它还提供超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。

Redux 除了和 React 一起用外，还支持其它界面库。它体小精悍（只有2kB，包括依赖）。

英文原版：http://redux.js.org/
Redux 中文文档: https://cn.redux.js.org/
Redux 中文文档:https://www.redux.org.cn/

Redux Flow

三大原则

同步

官网地址：https://cn.redux.js.org/tutorials/essentials/part-1-overview-concepts

异步

官网地址：https://cn.redux.js.org/tutorials/essentials/part-5-async-logic

查看原图

react中使用redux

我们使用redux处理一个问题，点击按钮，实现左侧导航的展开与闭合，如下图：

查询文档，可知：点击按钮，修改Sider容器的collapsed属性为true，即可满足要求。

但是，由于头部部分按钮和改Sider容器不在一个组件，故此，就出现了兄弟组件的通信问题。

安装组件

安装 redux 和 react-redux

yarn add redux react-redux

创建redux文件夹及其他文件

创建的目录如下：

创建store

在redux文件夹下面，新建store.js用于创建store

import { createStore } from 'redux'
import { SidebarCollapsedReducers } from "./reducers/SidebarCollapsedReducers"; let store = createStore(SidebarCollapsedReducers)

我们在项目中，不可能只有一个Reducer。

随着应用变得越来越复杂，可以考虑将 reducer 函数拆分成多个单独的函数，拆分后的每个函数负责独立管理 state 的一部分。

所以，我们还会用到一个api-- combineReducers

combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore 方法。

合并后的 reducer 可以调用各个子 reducer，并把它们返回的结果合并成一个 state 对象。

由 combineReducers() 返回的 state 对象，会将传入的每个 reducer 返回的 state 按其传递给 combineReducers() 时对应的 key 进行命名。

示例

rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
// 这将返回如下的 state 对象
{potato: {// ... potatoes, 和一些其他由 potatoReducer 管理的 state 对象 ...},tomato: {// ... tomatoes, 和一些其他由 tomatoReducer 管理的 state 对象，比如说 sauce 属性 ...}
}

combineReducers

const reducer = combineReducers({SidebarCollapsedReducers,
});

改进store

import { createStore, combineReducers } from "redux";
import { SidebarCollapsedReducers } from "./reducers/SidebarCollapsedReducers"; // 导入 SidebarCollapsedReducersconst reducer = combineReducers({SidebarCollapsedReducers,
});
const store = createStore(reducer);export default store;

改进根组件

原先app.js

import IndexRouter from './router/IndexRouter'
import './App.css'
function App(){return <IndexRouter></IndexRouter>}
export default App

引入 react-redux

改进app.js

import IndexRouter from './router/IndexRouter'
import {Provider} from 'react-redux'
import './App.css'
import store from './redux/store'
function App(){return <Provider store={store}> <IndexRouter></IndexRouter></Provider>
}
export default App

组件中使用

此功能涉及到两个组件：

TopHeader.js – 点击按钮部分，发布者
SideMenu.js – 订阅者

如下图

改造 TopHeader.js组件

// TopHeader.jsexport default function TopHeader({ pageTitle }) {
// 其他代码
};

引入 react-redux，改进TopHeader.js

补充：connect()

react-redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

connect(mapStateToPropsmapDispatchToProps
)(被包装的组件)

mapStateToProps

将state映射到 UI 组件的参数（props）。 const mapStateToProps =state=> state;

mapDispatchToProps

将用户对 UI 组件的操作映射成 Action。

const  mapDispatchToProps = (dispatch)=>{    return {        'Increment':()=> dispatch(IncrementAction({})),        'Decrement':() => dispatch(DecrementAction({})),    }
}

改进TopHeader.js

import {connect} from 'react-redux'function TopHeader({ pageTitle }) {const changeCollapsed = ()=>{// 改变state的状态 props.changeCollapsed() }// 其他代码return <button  onClick={()=>changeCollapsed()}>操作</button>
};const mapStateToProps = (state, ownProps) => { return {isCollapsed: state.SidebarCollapsedReducers.isCollapsed}
}const mapDispatchToProps = {changeCollapsed(){return {type: 'change_collapsed', }}
}  export default connect(mapStateToProps,mapDispatchToProps)(TopHeader);

同理，修改SideMenu.js

import {connect} from 'react-redux'function SideBar(props) { // 其他代码return <Sider collapsed={props.isCollapsed}></Sider> // 注意这里
};const mapStateToProps = (state, ownProps) => { return {isCollapsed: state.SidebarCollapsedReducers.isCollapsed}
}export default connect(mapStateToProps)(SideBar);

总结 – 全部代码

\redux\reducers\SidebarCollapsedReducers.js

export const SidebarCollapsedReducers = (prevState = {isCollapsed: false
}, action) => { switch (action.type) {case 'change_collapsed':let newState = {...prevState} // 注意这里newState.isCollapsed = !newState.isCollapsedreturn newStatedefault:return prevState}
};

\redux\store.js

import { createStore, combineReducers } from "redux";
import { SidebarCollapsedReducers } from "./reducers/SidebarCollapsedReducers"; // 导入 SidebarCollapsedReducersconst reducer = combineReducers({SidebarCollapsedReducers,
});
const store = createStore(reducer);export default store;

app.js

import IndexRouter from './router/IndexRouter'
import {Provider} from 'react-redux'
import './App.css'
import store from './redux/store'
function App(){return <Provider store={store}> <IndexRouter></IndexRouter></Provider>
}
export default App

组件

components\sandbox\TopHeader.js

import React, { useEffect, useState } from "react";
import { Layout} from "antd";
import { connect } from "react-redux";const { Header } = Layout;function TopHeader(props) {   const changeCollapsed = ()=>{// 改变state的状态// dispatchconsole.log(props)props.changeCollapsed() }return (<Header><div style={{ display: "flex" }}>{React.createElement(props.isCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined,{className: styles.trigger,onClick: () => changeCollapsed()})} </div> </Header>);
}const mapStateToProps = (state, ownProps) => { return {isCollapsed: state.SidebarCollapsedReducers.isCollapsed}
}const mapDispatchToProps = {changeCollapsed(){return {type: 'change_collapsed', }}
}
export default connect(mapStateToProps,mapDispatchToProps)(TopHeader);

components\sandbox\SideMenu.js

import { useEffect, useState } from "react";
import { Layout, Menu } from "antd";
import { connect } from "react-redux";const { Sider } = Layout;function AppLayout(props) {  return ( <Sider trigger={null} collapsible collapsed={props.isCollapsed}> // 注意这里 props.isCollapsed<div className={styles.logo}> {siteBaseConfig.siteName} </div>... </Sider> );
}const mapStateToProps = (state, ownProps) => { return {isCollapsed: state.SidebarCollapsedReducers.isCollapsed}
} export default connect(mapStateToProps)(AppLayout);

参考文档

https://cn.redux.js.org/api/combinereducers