【React】----redux学习总结
redux:
redux是flux的进阶版,相较与flux 更加方便,其内部封装了flux的一些方法,使可以快速的完成数据的交互
1、使用场景
大型项目
多模块,多数据
2、安装 cnpm install redux --save-dev
3、工作流程:
当组件需要改变store数据的时候,需要先创建一个action,通过dispatch将action传给Store,store会将action转发给reducer,在reducer内部进行数据的结合(previousState和state),然后生成一个新的 数据结构传递给store,发生改变,view也随之改变
4、代码操作流程
1、创建Store
import {createStore} from 'redux'
/*redux内部有createStore方法*/
import reducers from '...'
const store = createStore(reducers)
export default store
/*组件中引入 Store*/
import Store from '....'
constructor(){
super()
this.state=Store.getState
}
打印一下Store
可以看到Store中包含有
(1)、dispatch:用来传递action
(2)、getState:返回值就相当于this.state中的数据,里面存放着公共的数据
(3)、replaceReducer:
(4)、subscribe:监听数据的改变,必须传递一个函数
(5)、Symbol(observable):
2、创建reducers
官方解释reducer:
Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。刚开始你可以只有一个 reducer,随着应用变大,你可以把它拆成多个小的 reducers,分别独立地操作 state tree 的不同部分,因为 reducer 只是函数,你可以控制它们被调用的顺序,传入附加数据,甚至编写可复用的 reducer 来处理一些通用任务,如分页器
三大原则
1、必须有一个初始的数据 defaultState
2、必须返回纯函数 (输入一定 ,输出一定)
3、state是只读的,不可以被直接修改,唯一改变state的方法就是触发action,action是一个用于描述已发生事件的普通对象
const defaultState = {
inputVal:'',
list:''
}
export default (state=defaultState,action)=>{
/*
这个函数里面有2个参数一个是state,另一个是action。
state指的是store中的数据
action指的是View修改数据的时候传递过来的action
*/
switch (action.type) {
case 'CHANGE_ITEM':
const changState = JSON.parse(JSON.stringify(state))
changState.inoutVal=action.val
return changState
break;
default:
return state
}
}
3、创建action
cosnt action = {
type:'CHANGE_ITEM',
value:‘’
}
通过Store.dispatch(action) 将action传递给reducers reducers进行数据的更新
4、组件中进行数据更新
Store.subscribe(this.hangdleChangeUpadata.bind(this))
hangdleChangeUpadata(){
this.setState(Store.getState)
}
本博客仅作为个人学习记录