Redux状态管理 1.基础知识

时间:2023-02-14 17:10:42

Redux状态管理1 基础知识

使用方法
* 首先通过reducer新建store,随时通过store.getState获取状态
* 需要状态变更,store.dispatch(action)来修改状态
* Reducer函数接受state和action,返回新的state,可以用store.subscribe监听每次修改

import { createStore } from 'redux'

// 1.新建store
const store = createStore(counter)

// 2. 通过reducer建立
function counter(state=0, action) {
switch(action.type) {
case 'Add':
return state+1
case 'Reduce':
return state-1
default:
return 10
}
}

// 3. 初始化
const init = store.getState()
console.log(init)


function listener () {
const current = store.getState()
console.log(`现在的数字${current}`)
}

// 监听修改
store.subscribe(listener)

// 派发事件 传递action
store.dispatch({type: 'Add'})
store.dispatch({type: 'Add'})
store.dispatch({type: 'Reduce'})