redux讲解

Posted 2023-03-15

参考技术A

Cd到目标目录

Create-react-app project_name新建项目。

npm add redux-thunk

npm add react-redux

①脚手架新搭建一个项目

②删除项目中多余的文件

③简单填写内容，使得项目可以展示一个文字和一个按钮。使得点击按钮的时候改变state从而改变页面上的文字

①创建store.js文件，引入createStore（redux），

②createStore()需要reducer作为参数

①新建reducer0.js文件，引入——什么都不用引入，就是个函数而已

②写完函数并暴露出来

③createStore()中引入并添加

④createStore()默认暴露一下

①引入我们创建的store

②使用store.getState()去取得store里面的内容

①为了后续我们用按钮去改变store的状态，现在必须了解reducer的初始化

②reducer做出不同的改变，其依据是action.type。

③将reducer0()的内容改成switch(action.type) case 的形式

①在app.js中更改click函数，使用dispatch传递手写的action，去改变store里面的值

②发现不起作用，log出来发现store里面的值改变了，只是没有打印到页面上来。所以每次手动调用this.setState()即可

③ *为了避免每个函数都要手动setState。介绍监听函数——

*为了避免每个组件都要监听，可以在入口文件出统一监听

componentDidMount()

store.subscribe(()=>

this.setState()

);

④react-redux会帮我们自动监听，无需我们手动监听

①其本质是一个函数，接收的是接下来要操作的数据，返回的是一个action对象

②记住，action和reducer能够对应，关键在type

③新建一个action0.js文件。写一个函数，返回的action对象的type记得与reducer对应起来

④在需要的地方引入该函数，使用

①要用到react-redux里面的connect()()函数（函数的柯里化）。安装react-redux

②新建容器组件和UI组件

①作为一个桥梁，需要引入store、UI组件、以及桥梁本身（connect）

②store的引入必须由容器组件的父组件传入。即在app.js里面引入然后传给容器组件

③容器组件里面写好mapStateToProps和mapDispatchToProps。

①直接this.props就可以获取到

注意 ：UI组件自己也可以是自己的容器组件，egs里面很多都是这样用的。原理是一样的。

①创建reducer1.js和reducer2.js。稍微改动其内容

②在reducer0.js中引入combineReducers。在引入reducer1和reducer2 。然后把三者一起合并到myReducers里面，然后默认暴露myReducers。

③这样外界访问这三个reducer可以通过myReducers.reducer0来访问了。

①npm add redux-thunk

②在store.js中引入中间件

import createStore,applyMiddleware from "redux";

import reducer0 from \'./reducer0\'

import trunk from \'redux-thunk\'

export default createStore(reducer0,applyMiddleware(trunk))

新页面：需要自己去添加

旧的组件可以粘贴过来的：如果父子组件之间的嵌套关系没有发生改变，那么直接粘贴，应该基本不用更改什么。如果组件之间的父子关系或者嵌套关系发生了改变，那么需要花时间搞明白数据从哪儿来，然后做相应的修改