前言，对应的视频教程是B站技术胖的redux视频教程，本文内容是对应20-24节。
视频地址：https://www.bilibili.com/video/BV1w441137ss?p=21
项目代码地址：https://gitee.com/ling-xu/react-rudex-demo
对应此视频的系列笔记：
1-15节redux：https://blog.csdn.net/weixin_42349568/article/details/117196231
16-17节-redux-chunk:https://blog.csdn.net/weixin_42349568/article/details/117248649
18-19节-redux-saga:https://blog.csdn.net/weixin_42349568/article/details/117251408
20-24节-react-redux:https://blog.csdn.net/weixin_42349568/article/details/117266913

一，新建项目

1，创建新项目

 npx create-react-app react-redux-demo

2，删除src下并不必要的文件（只保留index.js）

并修改index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';ReactDOM.render(<App />,document.getElementById('root')
);

3,安装react-redux

npm i react-redux

4，基本的todolist组件

import React, { Component } from 'react';
class TodoList extends Component {constructor(props) {super(props);this.state = {  }}render() { return (<div><div><input></input><button>提交</button></div><ul><li>测试</li></ul></div>);}
}export default TodoList;

5,安装redux

npm i redux

二，照常使用redux

但是，这样一来，只有todolist这个组件使用到了这个仓库，如果有很多组件，都需要这个仓库的话，难道每个组件都要引用一次嘛？那也太麻烦了，为了让多个组件都可以直接访问store仓库，引入了react-redux，其中Provider组件就是解决这个问题的。

三，Provider和connect的使用

1，使用provider组件包裹的组件，都可以访问store仓库：

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList'
import {Provider} from 'react-redux'
import store from './store/index'
const App=(<Provider store={store}><TodoList /></Provider>
)
ReactDOM.render(App,document.getElementById('root')
);

2，使用connect和自定义映射函数获取store中的指定数据到组件参数中

import React, { Component } from 'react';
import {connect} from 'react-redux'
class TodoList extends Component {render() { return (<div><div><input placeholder={this.props.inputValue}></input><button>提交</button></div><ul><li>测试</li></ul></div>);}
}
//自定义映射函数，传入的参数state是store中的state,返回的就是这个组件接收到的props对象
const stateToProps=(state)=>{return {inputValue:state.inputValue//因为目前本组件只是用到inputValue这个值，所以只从store中取这个值，正常情况下可以取很多值}
}
//连接函数，第一个参数就是自定义的映射函数，把store中的state映射到组件TodoList的参数props上
export default connect(stateToProps,null)(TodoList);

这样一来，就可以在本组件中使用到store中的inputValue参数了。

3，使用diapatch更新store中的数据

import React, { Component } from 'react';
import {connect} from 'react-redux'
class TodoList extends Component {// inputChange(e){//     console.log(e.target.value)// }render() { return (<div><div><input value={this.props.inputValue}placeholder="亲输入"onChange={this.props.inputChange}></input><button>提交</button></div><ul><li>测试</li></ul></div>);}
}
//自定义映射函数，传入的参数state是store中的state,返回的就是这个组件接收到的props对象
const stateToProps=(state)=>{return {inputValue:state.inputValue//因为目前本组件只是用到inputValue这个值，所以只从store中取这个值，正常情况下可以取很多值}
}
const dispatchToProps=(dispatch)=>{return {inputChange(e){const action={type:'CHANGE_INPUT',value:e.target.value}dispatch(action)}}
}
//连接函数，第一个参数就是自定义的映射函数，把store中的state映射到组件TodoList的参数props上
export default connect(stateToProps,dispatchToProps)(TodoList);

要修改store中的inputValue值，必然要发起diapatch(action)，这里主要是这行代码：

const dispatchToProps=(dispatch)=>{return {inputChange(e){const action={type:'CHANGE_INPUT',value:e.target.value}dispatch(action)}}
}

把inputChange映射为本组件的props中的一个方法，即传入的参数是dispatch函数，返回的对象中是绑定到本组件props中的方法（应该可以同时返回多个方法）。
然后利用连接函数的第二个参数上：

export default connect(stateToProps,dispatchToProps)(TodoList);

使用的时候：

<input value={this.props.inputValue}placeholder="亲输入"onChange={this.props.inputChange}></input>

4，对应的reducer处理：

const defaultState={inputValue:'',list:[]
}
const reducer=(state=defaultState,action)=>{if(action.type==='CHANGE_INPUT'){const newState=JSON.parse(JSON.stringify(state))newState.inputValue=action.valuereturn newState}return state
}
export default reducer

5，完成新增事项的功能

todolist:

对应的reducer:

const defaultState={inputValue:'',list:[]
}
const reducer=(state=defaultState,action)=>{if(action.type==='CHANGE_INPUT'){const newState=JSON.parse(JSON.stringify(state))newState.inputValue=action.valuereturn newState}if(action.type==='ADD_ITEM'){const newState=JSON.parse(JSON.stringify(state))newState.list.push(newState.inputValue)newState.inputValue=''return newState}return state
}
export default reducer

6,解构赋值简化代码

由上面的知识可以知道，connect函数把属性和方法全部映射到this.props这个对象中了，并且所有的属性和方法都在这个对象的第一层级上，于是就可以使用解构赋值的方式提取这些属性和方法，就不需要各种this.porps到处写了：

具体代码：

import React, { Component } from 'react';
import {connect} from 'react-redux'
class TodoList extends Component {render() { let {inputValue,list,clickBtn,inputChange}=this.propsreturn (<div><div><input value={inputValue}placeholder="请输入"onChange={inputChange}></input><button onClick={clickBtn}>提交</button></div><ul>{list.map((item,index)=>{return (<li key={index}>{item}</li>)})}</ul></div>);}
}
//自定义映射函数，传入的参数state是store中的state,返回的就是这个组件接收到的props对象
const stateToProps=(state)=>{return {inputValue:state.inputValue,list:state.list//因为目前本组件只是用到inputValue这个值，所以只从store中取这个值，正常情况下可以取很多值}
}
const dispatchToProps=(dispatch)=>{return {inputChange(e){const action={type:'CHANGE_INPUT',value:e.target.value}dispatch(action)},clickBtn(){const action={type:'ADD_ITEM'}dispatch(action)}}
}
//连接函数，第一个参数就是自定义的映射函数，把store中的state映射到组件TodoList的参数props上
export default connect(stateToProps,dispatchToProps)(TodoList);

react-redux的todolist（b站笔记）-（四）相关推荐

react+redux+generation-modation脚手架搭建一个todolist
TodoList 1. 编写actions.js 2. 分析state 试着拆分成多个reducer 3. 了解store 4. 了解redux数据流生命周期 5. 分析容器组件和展示组件搞清楚,数 ...
如何使用webpack+react+redux从头搭建Todolist应用
webpack环境配置应用整体框架设计代码实现 Container Components Actions Reducers indexjs 测试总结一言不和先上demo: https://ms ...
React + Redux
相当长一段时间以来,我一直在React和Redux中实现应用程序.在过去的几年里,我写了两本关于它的电子书,并发布了学习React及其生态系统的课程平台.课程平台甚至内置在React和Redux中.我 ...
React Redux 的一些基本知识点
一.React.createClass 跟 React.Component 的区别在于后者使用了ES6的语法,用constructor构造器来构造默认的属性和状态. 1. React.createCl ...
webpack+react+redux+es6开发模式---续
一.前言之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
一个 react+redux 工程实例
在前几天的一篇文章中总结部分提到了学习过程中基础的重要性.当然,并不是不支持大家学习新的框架,这篇文章就分享一下react+redux工程实例. 一直在学习研究react.js,前前后后做了几次分享. ...
React Redux: 从文档看源码 - Components篇
注:这篇文章只是讲解React Redux这一层,并不包含Redux部分.Redux有计划去学习,等以后学习了Redux源码以后再做分析注:代码基于现在(2016.12.29)React Redux ...
React+Redux系列教程
2019独角兽企业重金招聘Python工程师标准>>> 参考项目:https://github.com/lewis617/react-redux-tutorial 参考项目下载地址: ...
实例讲解基于 React+Redux 的前端开发流程
前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的an ...

react-redux的todolist（b站笔记）-（四）