Redux基础
一、设计思想:react是单项数据流框架,为了在相对较大的项目中方便进行状态管理。
二、基本概念:
1.Store:保存数据并且是改变state
的地方,用createStore
来进行创建。(整个应用只能有一个)
import {createStore} from 'redux';
//createStore函数用来接收reducer函数作为参数,返回一个新的Store对象
const store = createStore(reducer)
export default store
2.Reducer纯函数:
(1)储存默认数据(用defaultState);
const defaultState ={//默认数据
inputValue:'请输入内容',
list:[
'react','redux','react-dom'
]
}
(2)接收action
。
//Reducer收到action对象后,必须给出一个新的state传递到Store中进行更新,这样view才会发生变化。这种state的计算过程就叫做reducer
//reducer是一个函数,接收当前state和action作为参数。
function reducer(state = defaultState,action){
if(action.type===CHANGE_INPUT){
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value
return newState
}
if(action.type===ADD_ITEM){
let newState = JSON.parse(JSON.stringify(state))
newState.list.push(newState.inputValue)
newState.inputValue = ''
return newState
}
if(action.type===DELETE_ITEM){
let newState = JSON.parse(JSON.stringify(state))
newState.list.splice(action.index,1)
return newState
}
// console.log(state,action)
return state
}
- store.getState()拿到当前
state
this.state = store.getState()
,这里对于state
的改变用setState
。
4.action
对象:state
变化能导致view
发生变化,同样view
的变化也会导致state
发生变化,用只能户接触到view
,action
就是用户通过视图层发出的通知,以此来让state
发生变化。
(以其中某一个函数为例)
changeInputValue(e){
// console.log(e.target.value);
const action = {
type:CHANGE_INPUT,
value:e.target.value
}
store.dispatch(action)
}
5.store.dispatch
函数:根据上面代码也能猜到,action
想要传到reducer
使用这个函数才是唯一的方法。
6.store.subscribe
函数用于订阅redux
的状态。
//通过函数进行绑定
store.subscribe(this.storeChange)//订阅redux状态
内容参考技术胖老师文章