Redux_2

まだ知らない李徳思.また整理したものを記録しましょう!
李徳思管理state!
ReduxはReact、Angular、Vue、Vanilla JSでも使用できます.
"Redux is a predictable state container for Javascript apps."

Redux Three core concepts

1.Store:アプリケーション全体に適用されるショップ
店の仕事?

Holds application state

Allows access to state via getState()

Allows state to be updated via dispatch(action)

Registers listeners via subscribe(listener)

2.アクション:アプリケーションの状態を変更します.

The only way your application can interact with the store.

Carry some information from your app to the redux store.

Plain JS objects

Have a 'type' property that indicates the type of action being performed

const BUY_CAKE='BUY_CAKE'
function buyCake(){
  return{
    type:BUY_CAKE,
    info:'First redux action'
  }
}

3.Reducer:storeとactionをバンドルします.

Actually carries out the state transition depending on the action

Specify how the app's state changes in response to actions sent to the store

//(previousState,action)=>newState

const initialState={
  numOfCakes:10
}
const reducer=(state=initialState,action)
=>{switch(action.type){
  case BUY_CAKE:return{
    numOfCakes:state.numOfCakes-1}
  default:return state
  }
}
}

注意:https://www.smashingmagazine.com/2018/07/redux-designers-guide/