redux使用个人心得

1.个人理解

redux：(store：通过reduce对象中的createStore)(核心)

• state：状态

• reducer：仓库管理员是一个函数，需要返回一个对象,需要接收(old state,action)

• action：(同步和异步)修改状态

• getState：用来从仓库中获取状态

• dispatch：给reduce派发一个aciton

• subscribe：订阅,当状态改变，就会执行回调函数

• ActionCreators : 表示创造一个action，view 层与data层的介质；

react

• jsx

• 组件

• props

• state setState

• 事件

• 受控制与非受控

react-redux

虽然react和redux都是独立的，但是一般我们会把他俩结合起来用，靠react-redux来结合。

流程

用户通过界面组件触发ActionCreator，携带Store中的旧State与Action

流向Reducer,Reducer返回新的state，并更新界面。

2.简易计数器案例的实现

结构图：

index.js

把redux中的某个状态映射到react中的某个组件(笨拙组件-->智能组件)，就需要react-redux插件，代码如下，需要在根组件最外层包上provider标签，如上图所示

import {connect} from "react-redux"

export default connect(mapStateToProps,mapDispatchToProps)(Counter);

store/index

若含有异步的actions，则需要中间件(redux-thunk)来创建store

actions/counter.js

Container/Counter.js

reducer/counter.js

git源码地址:https://github.com/lihanyuan125/react-counter

                                                             前端小菜鸡学习笔记，不喜勿喷，欢迎指正