深度刨析-reduxTodo

Posted 2020-08-11

昨天我们讲到了怎么去简单的构建一套完整的redux体系，今天我以一个简单的实例去讲解reduxTodo用ES6+webpack+redux怎么去实现数据流动，还有需要注意的地方。好的，言归正传，让我们开始吧！

首先我们看一下完整的文件目录，一个简单的todo我们只做删除和添加两个功能

再贴一下完整的示例图

首先说一下如果我们不使用redux怎么去实现简单的删除功能呢，我们把上图分为两个组件部分，分别是Header和section部分，header部分包括的是输入框和h1部分，section部分我们包括的是输入内容部分，当我们输入值得时候需要把值传递给兄弟组件section，我们可以使用回调函数先把值传递给她们共同的父组件，然后分发属性的形式传递值给section组件，当然我这边不写具体的代码，具体的回调函数传值得方式可以参考

http://www.alloyteam.com/2016/01/some-methods-of-reactjs-communication-between-components/

今天我们说到的是怎么去通过唯一的store的方法传值得过程

1.新建actions

昨天我们说了新建actions是最好用的方法，因为我们只需要知道有哪些功能即可而且不依赖其他的文件是否写好

OK,因为之前说了只有两个功能，所以我们只需要写两个功能即可

我这边会尽量精细的说明每一行代码的原因，一个为了自己能够了解透彻，二个为了方便大家阅读

看一下ActionTypes里面的文档

我们在其他的文档里面一般有export对象的时候都是通过

import * as Actions from "地址"或者import {addTodo,deleteTodo}from "地址"引入

2.下面看看reducers

reducers/todo.js

reducers/index.js

reducers有三点需要注意一下：

(1).不要修改 state。都是从action那里拿过来的

(2).在 default 情况下返回旧的 state。遇到未知的 action 时，一定要返回旧的 state。

(3).如果没有旧的state,就返回一个initialState,很重要！

 首先看一下todos.js，我们在里面可以看到state是如何变化生成新的state的，比如我们每次触发ADD_TODO的时候会返回一个

[{id:最大id,text:action中存储的text}，...state]，每次触发DELETE_TODO的话会返回一个已经遍历删除了当前选择项之后的state

其他的情况返回state,如果没有state的话返回initialState.

index.js里面的情况用combineReducers结合然后直接输入rootReducers

3.创建store

一般情况我们只需要 const store = createStore(rootReducers);第二个参数一般是没有的

4.UI组件component

Header.js

TodoTextInput.js

MainSection.js

TodoItem.js

要研究透彻上面四个组件，我们要先看看他们的containers里面的App.js容器组件

在index.js中我们传入一个store,然后在容器组件中我们可以用mapStateToProps去建立

index.js

下面两张图输出的分别是我们的Actions文件夹对象下面的方法addTodo和我们通过mapDispatchToProps处理过后的对象actions中的方法addTodo

文件夹下的对象和actions方法对象

从上图中我们可以发现，经过mapDispatchToProps处理过之后，我们bindActionCreators（Actions,dispatch）处理过后生成的是一个方法对象

{addTodo:function(){},deleteTodo:function(){}},是相当于和我们的dispatch结合起来生成了一个新的同名函数，这个函数的功能是建立起dispatch(action)到参数的映射！

5.说说数据流动

其实redux里面最难的应该是数据的流动，比如上面的todo的例子，我们的功能有两个，分别是增删，就拿增加说一下，用户e.which===13的时候，我们调用Action,event事件触发的时候我们是不一定需要触发Action的，触发Action的条件我们可以自己设定，比如上面的if(e.which===13){}

那么好的，我们怎么去触发action?

我们在mapDispatchToProps的时候把action和dispatch合并在一起，然后这个方法对象里面有很多方法，每一种方法都可以触发action，我们调用这些方法是在UI组件通过事件调用，所以我们需要把需要的方法一层层的传递下去，直到我们的UI组件可以传递通过属性获取到这个方法并且返回一个数据text或者id或者其他数据，存储在action内部然后供reducer调用。所以说我们的mapDispatchToProps方法是创造出dispatch(action)让我们的event事件去触发，然后把需要的数据存储在action中！

后续的打包一下即可！

好吧 写完了 0.0