- A+
所属分类：Web前端
1.前言
在之前的博客中，我写了一篇关于todo-list实现的博客，一步一步详细的记录了如何使用基础的React知识实现一个React单页面应用，通过该篇文章，能够对React入门开发有一个直观的认识和粗浅的理解。
近期，个人学习了一下Redux，又将该项目使用 React+Redux的方式进行了实现。本片内容记录以下实践的过程。通过本实例，可以学习到：
- Redux的核心思想；
- Redux的三大概念；
- React+Redux的开发方法和流程；
下面将从以下几个方面展开讲解和记录。
2.项目演示
3.Redux基础知识
3.1 认识
3.1.1 动机
随着 JavaScript 单页面应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态），管理不断变化的 state 非常困难，state 在什么时候，由于什么原因，如何变化已然不受控制。当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。
因此，需要一种更可控的方式来管理系统的state，让系统的state变得可预测，redux就是用来管理系统state的工具。
3.1.2 三大原则
-
单一数据源
整个应用的状态都保存在一个对象中，一个应用只有一个唯一的state,保存在store中，通过store统一管理。
-
状态是只读的
唯一改变 state 的方法就是触发
action，action是一个用于描述已发生事件的普通对象。redux不会直接修改state，而是在状态发生更改时，返回一个全新的状态，旧的状态并没有进行更改，得以保留。可以使用
redux-devtools-extension工具进行可视化查看。 -
状态修改由纯函数完成
Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。
3.2 基础
3.2.1 Store
Redux的核心是 Store ,Store 由 createStore方法创建，
createStore(reducer, [initState])//reducer表示一个根reducer,initState是一个初始化状态 store提供方法来操作state
- 维持应用的 state；
- 提供
getState()方法获取 state； - 提供
dispatch(action)方法更新 state； - 通过
subscribe(listener)注册监听器,在state状体发生变化后会被调用。 - 通过
subscribe(listener)返回的函数注销监听器。
3.2.2 Action
action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。通过 store.dispatch() 将 action 传到 store。如果有数据需要添加，在action中一并传过来。
action需要action创建函数进行创建，如下是一个action创建函数：
/* * action 类型 */ export const ADD_TODO = 'ADD_TODO'; export const TOGGLE_TODO = 'TOGGLE_TODO' export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER' /* * 其它的常量 */ export const VisibilityFilters = { SHOW_ALL: 'SHOW_ALL', SHOW_COMPLETED: 'SHOW_COMPLETED', SHOW_ACTIVE: 'SHOW_ACTIVE' } /* * action 创建函数 */ export function addTodo(text) { return { type: ADD_TODO, text } } export function toggleTodo(index) { return { type: TOGGLE_TODO, index } } export function setVisibilityFilter(filter) { return { type: SET_VISIBILITY_FILTER, filter } } 返回一个对象，改对象由reducer获取，根据 action 类型进行相应操作。
3.2.3 Reducer
store通过 store.dispatch(某action(参数)) 来给reducer安排任务。
简单理解，一个reducer就是一个函数，这个函数接受两个参数 当前state 和 action，然后根据 action 来对当前 state 进行操作，如果有需要更改的地方，就返回一个 新的 state ,而不会对旧的 state进行操作，任何一个阶段的 state 都可以进行查看和监测，这让 state 的管理变得可控，可以实时追踪 state的变化。
React中使用Redux时，需要有一个根 Reducer，这个根 Reducer 通过 conbineReducer() 将多个子 Reducer 组合起来。
根reducer：
import { combineReducers } from 'redux' import todos from './todos' import visibilityFilter from './visibilityFilter' //根reducer // rootReducer 根reducer,把子reducer组合在一起 export default combineReducers({ todos, //子state visibilityFilter //子state }) 子reducer：
//这里的state = []为state的当前值 const todos = (state = [], action) => { switch (action.type) { case 'ADD_TODO': return [ ...state, // Object.assign() 新建了一个副本 { id: action.id, text: action.text, completed: false } ] case 'TOGGLE_TODO': // console.log(state); return state.map((value,index) => { return (value.id === action.id) ? {...value,completed:!value.completed} : value; }) default: return state; } } export default todos; 3.2.4 数据流
3.3 展示组件和容器组件
3.3.1 展示组件和容器组件分离
本部分在笔者尚未深入研究，在此给出redux作者写的深度解析文章链接及网上的译文链接，读者可自行查看。
原文链接：展示组件和容器组件相分离
译文链接：展示组件和容器组件相分离
3.3.2 展示组件和容器组件比较
| 展示组件 | 容器组件 | |
|---|---|---|
| 作用 | 描述如何展示骨架、样式 | 描述如何运行(数据获取、状态更新) |
| 直接使用Redux | 否 | 是 |
| 数据来源 | props | 监听Redux state |
| 数据修改 | 从props调用回调函数 | 向Redux派发action |
| 调用方式 | 手动 | 通常由React Redux生成 |
大部分的组件都应该是展示型的，但一般需要少数的几个容器组件把它们和 Redux store 连接起来。
React Redux 的使用 connect() 方法来生成容器组件。
import { connect } from 'react-redux' import { setVisibilityFilter } from '../actions' import Link from '../components/Link' //mapStateToProps参数中的state是store的state. // 在容器组件中，通过mapStateToProps方法，在展示组件和store中间传递数据和执行action // ownProps表示的是组件自身的属性,即父组件传过来的属性 const mapStateToProps = (state, ownProps) => { return { active: ownProps.filter === state.setVisibilityFilter } } // ownProps表示的是组件自身的属性,即父组件传过来的属性 const mapDispatchToProps = (dispatch, ownProps) => { return { // 这里写方法名，在展示组件中通过这个方法名来执行里面的action派遣函数 onClick: () => { // 执行setVisibilityFilter这个action dispatch(setVisibilityFilter(ownProps.filter)) } } } //通过connect让Link组件得以连接store,从store中取得active数据和onClick方法的执行体。 export default connect( mapStateToProps, mapDispatchToProps )(Link) connect() 中最核心的两个方法是：mapActionToProps 和 mapDispatchToProps ,通过容器组件，可以在 展示组件和 store之间传递数据和执行 action。
4.基于Redux的React项目实战
4.1 目录结构
根据Redux的几大组成部分，在进行开发时，将在之前基础的React开发模式下，增加几个文件夹，形成新的开发目录结构，具体目录结构如下图：
│ App.css │ App.js │ App.test.js │ index.css │ index.js │ logo.svg │ readme.txt │ serviceWorker.js │ setupTests.js ├─actions ├─components ├─containers └─reducers 
如图，在之前的结构下，新增了 actions 、reducers 、containers 这三个文件夹。
4.2 配置React-Redux开发环境
4.2.1 步骤
在建好文件目录后就可以开始进行开发了，由于是基于Redux做React开发，所以首先一步当然需要把Redux的开发环境配置一下。
- 安装
react-redux包
npm install --save react-redux - 编写入口文件 index.js
前文讲到，redux使用一个唯一的 store 来对项目进行状态管理，那么首先我们需要创建这个 store ,并将这个 store 作为一个属性，传递给下级子组件。
具体代码如下：
import React from 'react'; import ReactDOM, { render } from 'react-dom'; //redux ---------------------------------------------------- import { Provider } from 'react-redux'; import { createStore } from 'redux'; import { rootReducer } from './reducers'; //引入项目根组件App.jsx import App from './App'; //创建store,将根Reducer传入store中。redux应用只有一个单一的store const store = createStore(rootReducer); render( <Provider store = {store}> <App /> </Provider>, document.getElementById('id') ) 如上代码所示，使用Redux，需要引入的文件有：
Provider组件createStore方法- 根reducer
- 项目根组件App.jsx
createStore：createStore 方法可接受两个参数，第一个是项目的根 reducer ,是必选的参数，另一个是可选的参数，可输入项目的初始 state 值。通过该方法创建一个 store 实例，即为项目唯一的 store。
Provider组件：Provider组件包裹在跟组件App.jsx外层，将项目的 store作为属性传递给 Provider。使用Provider 可以实现所有子组件直接对 store 进行访问。在下文将深入讲一下 Provider 的实现和工作原理。
根reducer：随之项目的不断增大，程序state的越来越复杂，只用一个 reducer 是很难满足实际需求的，redux中采用将 reducer 进行拆分，最终在状态改变之前通过 根 reducer 将 各个拆分的子 reducer 进行合并方式来进行处理。
App.jsx：项目的跟组件，将一级子组件写在App.jsx中。
4.2.2 Provider
provider 包裹在根组件外层，使所有的子组件都可以拿到state。它接受store作为props，然后通过context往下传，这样react中任何组件都可以通过context获取store。
Provider 原理：
原理是React组件的context属性
组件源码如下：
原理是React组件的context属性
export default class Provider extends Component { getChildContext() { //返回一个对象，这个对象就是context return { store: this.store } } constructor(props, context) { super(props, context) this.store = props.store } render() { return Children.only(this.props.children) } } Provider.propTypes = { store: storeShape.isRequired, children: PropTypes.element.isRequired } Provider.childContextTypes = { store: storeShape.isRequired } 4.3 src目录文件列表
| 文件夹 | 文件 |
|---|---|
| src | index.js |
| src/actions | index.js |
| src/components（展示组件） | App.jsx |
| TodoList.jsx | |
| Footer.jsx | |
| Todo.jsx | |
| Link.jsx | |
| src/containers（容器组件） | AddTodo.js |
| FilterLink.js | |
| VisibleTodoList.js | |
| src/reducers | index.js |
| todo.jsx | |
| visibilityFilter.js |
4.4 项目代码
注意：
- 代码说明大部分写在项目代码中，读者在查看时，建议对代码也要进行仔细阅读。
- 本项目功能较简单，因此代码直接按照文件目录给出，而不按照功能模块陈列。
4.4.1 入口文件 index.js
import React from 'react'; import ReactDOM, { render } from 'react-dom'; import './index.css'; import App from './components/App'; //redux import { Provider } from 'react-redux'; import { createStore } from 'redux'; import rootReducer from './reducers'; //创建store,createStore()第一个参数是项目的根reducer，第二个参数是可选的，用于设置state的初始状态 const store = createStore(rootReducer); render( // Provider组件包裹在跟组件的外层,使所有的子组件都可以拿到state. // 它接受store作为props,然后通过context往下传，这样react中任何组件 // 都可以通过context获取store. <Provider store = {store}> {/* App 根组件 */} <App /> </Provider>, document.getElementById('root') ) 4.4.2 actions文件
- index.js
let nextTodoId = 0; // 定义action 常量 对于小型项目，可以将action常量和action创建函数写在一起，对于复杂的项目，可将action常量和其他的常量抽取出来，放到单独的某个常量文件夹中 const ADD_TODO = 'ADD_TODO'; const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'; const TOGGLE_TODO = 'TOGGLE_TODO'; //这里是几个action创建函数，函数里面的对象才是action,返回一个action // text是跟随action传递的数据 // 调用 dispatch(addTodo(text)),即代表派遣action,交给reducer处理 //action生成函数 // 大部分情况下，他简单的从参数中收集信息，组装成一个action对象并返回， // 但对于较为复杂的行为，他往往会容纳较多的业务逻辑与副作用，包括与后端的交互等等。 export const addTodo = (text) => { return { type: ADD_TODO, id: nextTodoId ++, text } } export const setVisibilityFilter = (filter) => { return { type: SET_VISIBILITY_FILTER, filter } } export const toggleTodo = (id) => { return { type: TOGGLE_TODO, id } } //三个常量 export const VisibilityFilters = { SHOW_ALL: 'SHOW_ALL', SHOW_COMPLETED: 'SHOW_COMPLETED', SHOW_ACTIVE: 'SHOW_ACTIVE' } 4.4.3 components文件（展示组件）
- App.jsx
import React from 'react' import Footer from './Footer' import AddTodo from '../containers/AddTodo' import VisibleTodoList from '../containers/VisibleTodoList' //应用的根组件 const App = () => { return ( <div> {/* 容器组件 */} <AddTodo /> {/* 容器组件 */} <VisibleTodoList /> {/* 展示组件 */} <Footer /> </div> ) } export default App - Footer.jsx
import React from 'react' import FilterLink from '../containers/FilterLink' import { VisibilityFilters } from '../actions' //无状态组件，这种写法初学者可能难以理解，可以先补习下ES6，等价于 //function Footer(){ // return (<div>XXX</div>) //} const Footer = () => ( <div> <span>Show: </span> <FilterLink filter={VisibilityFilters.SHOW_ALL}> All </FilterLink> <FilterLink filter={VisibilityFilters.SHOW_ACTIVE}> Active </FilterLink> <FilterLink filter={VisibilityFilters.SHOW_COMPLETED}> Completed </FilterLink> </div> ) export default Footer - Link.jsx
import React from 'react' import PropTypes from 'prop-types' //prop-types是一个组件属性校验包，导入这个包可以数据进行格式等方面的校验 const Link = (props) => { return ( <button onClick={props.onClick} disabled={props.active} style={{marginLeft:'4px'}}> {props.children} </button> ) } Link.propTypes = { active: PropTypes.bool.isRequired, children: PropTypes.node.isRequired, onClick: PropTypes.func.isRequired } export default Link - TodoList.jsx
import React, { createFactory } from 'react' import PropTypes from 'prop-types' import Todo from './Todo' const TodoList = (props) => { return ( <ul> { props.todos.map((value,index) => { return <Todo key = {index} {...value} onClick = {() => props.toggleTodo(value.id)} /> }) } </ul> ) } TodoList.propTypes = { todos: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.number.isRequired, completed: PropTypes.bool.isRequired, text: PropTypes.string.isRequired }).isRequired ).isRequired, toggleTodo: PropTypes.func.isRequired } export default TodoList - Todo.jsx
import React from 'react' import PropTypes from 'prop-types' const Todo = ({ onClick, completed, text }) => ( <li onClick={onClick} style={ { textDecoration: completed ? 'line-through' : 'none' }} > {text} </li> ) Todo.propTypes = { onClick: PropTypes.func.isRequired, completed: PropTypes.bool.isRequired, text: PropTypes.string.isRequired } export default Todo 4.4.4 containers文件(容器组件)
注意：本部分涉及 connect() 方法，代码注释中有重要知识点，建议仔细查看。对于connect()本文不做深入探讨，后续会单独成文分析。
- FilterLink.js
import { connect } from 'react-redux' import { setVisibilityFilter } from '../actions' import Link from '../components/Link' import { createFactory } from 'react' //mapStateToProps参数中的state是store的state. // 在容器组件中，通过mapStateToProps方法，在展示组件和store中间传递数据和执行action // ownProps表示的是组件自身的属性,即父组件传过来的属性 const mapStateToProps = (state, ownProps) => { return { active: ownProps.filter === state.setVisibilityFilter } } // ownProps表示的是组件自身的属性,即父组件传过来的属性 const mapDispatchToProps = (dispatch, ownProps) => { return { // 这里写方法名，在展示组件中通过这个方法名来执行里面的action派遣函数 onClick: () => { // 执行setVisibilityFilter这个action dispatch(setVisibilityFilter(ownProps.filter)) } } } //通过connect让Link组件得以连接store,从store中取得active数据和onClick方法的执行体。 export default connect( mapStateToProps, mapDispatchToProps )(Link) // //将Link组件的内容放到本页面来结合起来理解，以下代码不是本组件的功能代码 // const Link = ({ active, children, onClick }) => ( // <button // onClick={onClick} // disabled={active} // style={{ // marginLeft: '4px', // }} // > // {children} // </button> // ) // Link.propTypes = { // active: PropTypes.bool.isRequired, // children: PropTypes.node.isRequired, // onClick: PropTypes.func.isRequired // } 建议将容器组件和它对应的展示组件紧密结合起来理解。
- AddTodo.js
import React from 'react' import { connect } from 'react-redux' import { addTodo } from '../actions' const AddTodo = ({ dispatch }) => { let input return ( <div> <form onSubmit={e => { e.preventDefault() if (!input.value.trim()) { return } dispatch(addTodo(input.value)) input.value = '' }} > <input ref={node => input = node} /> <button type="submit"> Add Todo </button> </form> </div> ) } export default connect()(AddTodo); - VisibleTodoList.js
import { connect } from 'react-redux' import { toggleTodo } from '../actions' import TodoList from '../components/TodoList' //获取符合条件的todo, // todos state中的todo数据 // filter state中的过滤条件 const getVisibleTodos = (todos, filter) => { switch (filter) { case 'SHOW_COMPLETED': return todos.filter(t => t.completed) case 'SHOW_ACTIVE': return todos.filter(t => !t.completed) case 'SHOW_ALL': default: return todos } } const mapStateToProps = (state) => { return { todos: getVisibleTodos(state.todos, state.visibilityFilter) } } const mapDispatchToProps = (dispatch) => { return { toggleTodo: (id) => { dispatch(toggleTodo(id)) } } } export default connect( mapStateToProps, mapDispatchToProps )(TodoList) 4.4.5 reducer文件夹
- 根reducer/index.js
import { combineReducers } from 'redux' import todos from './todos' import visibilityFilter from './visibilityFilter' // rootReducer 根reducer,把子reducer组合在一起 export default combineReducers({ todos, //子state visibilityFilter //子state }) - todo.js
//这里的state = []为state的当前值 const todos = (state = [], action) => { switch (action.type) { case 'ADD_TODO': return [ ...state, // Object.assign() 新建了一个副本 { id: action.id, text: action.text, completed: false } ] case 'TOGGLE_TODO': // console.log(state); return state.map((value,index) => { return (value.id === action.id) ? {...value,completed:!value.completed} : value; }) default: return state; } } export default todos; - visibilityFilter.js
const visibilityFilter = (state = 'SHOW_ALL', action) => { switch (action.type) { case 'SET_VISIBILITY_FILTER': return action.filter default: return state } } export default visibilityFilter 5.总结
本文，菜鸡本鸡通过一个todo-list实例相对系统的介绍了redux的一些基础概念，基本用法和如何如react进行结合，实现react的功能开发，主要内容包括redux基础，redux于react结合，实例完成步骤，完整代码，项目演示等，比较适合刚接触redux的菜鸟阅读和学习，希望能帮助到有需要的同学。
