关于redux:redux总结

Redux 是什么

Redux is a predictable state container for JavaScript apps

Redux 概念

store: 利用数据的存储核心
action: 利用数据的扭转的形容
reducer: 决定利用数据新状态的函数，接管利用之前的状态和一个 action 返回数据的新状态。
state: 状态
middleware: redux 提供中间件的形式，实现一些 流程的自定义管制，同时造成其插件体系。

流程

环境筹备

npx create-react-app cra
cd cra 
npm start

在 cra 我的项目中装置 redux

yarn add redux

redux 整体感知

// reducer
const weight = (state = 160, action) => {switch (action.type) {
        case 'eat':
            return state + 10
        case 'hungry':
            return state - 10
        default:
            return 160
    }
}

const store = createStore(weight)

console.log(store.getState())

store.dispatch({type: 'eat'})
console.log('我吃了一些事物')
console.log(store.getState())

console.log('我饿了好几天')
store.dispatch({type: 'hungry'})
console.log(store.getState())
console.log('我又饿了好几天')
store.dispatch({type: 'hungry'})
console.log(store.getState())

reducer 外面应用 switch 语句依据传入的类型，输入新的状态
把 reducer 传入 createStore(weight)
通过 dispatch 传入不同的类型，扭转状态 state。
store.dispatch({type: ‘hungry’})
通过 store.getState() 获取以后的状态

通过 subscribe 订阅，实现 redux 数据响应

const store = createStore(weight)


const watch = () => {const cur = store.getState()
    console.log(`stark wang 当初体重为 ${cur}斤 `)
}

store.subscribe(watch)
// watch()


store.dispatch({type:'eat'})

store.dispatch({type:'eat'})

store.dispatch({type:'eat'})

store.dispatch({type: 'hungry'})