React学习笔记(2)redux

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Hreticent/article/details/89889134

store 是核心 其中包含了state ,state的结构和内容决定了UI的样子,UI层可以去触发action(动作),每一个action指代一个state更改为另外一个状态,action会发送到reducer,reducer根据action中的描述将store中的state修改,从而我们的到新的state,新的state就会得到新的ui,如此往复,这就是redux中的数据流 

4-2 定义state 就是将原来那种模式的state 集中管理全部放到一个文件中 

4-3要使用Action需要使用store提供的dispatch方法将Action发送出去 

action其实是一个JSON对象,但是一般都会使用action Creator这个函数 返回一个action

Reducer其实是一个函数reducer(),这个函数接收当前状态的state和action这两个参数

根据state和action进行计算从而得到新的state 

可以把reducer理解为action的解析器 action描述了需要如何去修改一个state,而reducer落实到代码层面,对state 进行真正的修改

注意redux中的state是不可变的,reducer修改state并不能在原有的state上修改而是需要返回一个新的state对象

es6  对象扩展语法 创建一个新的state

注意 当启动应用时 redux中的state初始值是undfiend(reducer中,所以需要先定义一个初始值

常见的拆分有根据state 但是对于大型项目并不适用 

 

 

store是粘合剂是核心 它将redux中的各种概念粘合在一起,创建store需要redux提供的API createStore(),createStore它接收 reducer作为参数,共同创建出store这个对象,同时store这个对象提供了dispatch这个API,可以让我们通过dispatch函数来发送action,同时store中提供了getState()这个API可以获得store中全局保存的state,同时可以通过subscribe订阅state的全局变化 

mapStateToProps 方法将 redux中的state映射到react中的props上

mapDispatchToProps 将 redux中将要使用的方法 映射到react中的props上

这样组件就可以通过propos上的方法调用相应的redux中的action方法

我的项目中的index.js相当于容器型组件和组件的结合

老师的项目中分成了两类 一类是展示型组件 就是components文件夹下的组件,另一类是容器型组件和state有关系的,放到了container文件夹下 ,比如AddTodoContainer组件,利用react-redux

提供的connect高阶组件 实现连接

我的项目中 这两个合并在☝️文件中 就是每个组件的入口文件 比如 canvas_root文件夹下canvas文件夹下的index.js这个文件 

redux-thunk 处理异步action的中间件 

猜你喜欢

转载自blog.csdn.net/Hreticent/article/details/89889134