Reduxの定理👻

redux:一方向
Action:stateの動作を変更する方法を書きます
dispatch:動作の実行
reduce:アクション実行後、新しいオブジェクトを作成してステータスを置き換えます
新しいstateを作る(不変性に注意!)
欠点:

の行動を事前に制定しなければならない.

の不変性を維持してこそ、タイムマシン機能を使用することができる.

const {createStore} = require('redux')

const reducer = (prevState, action) => {
    switch(action.type){
        case 'LOG_IN':
            return {
                ...prevState,
                user: action.data,
            }
        case 'ADD_POST':
            return{
                ...prevState,
                posts: [...prevState.posts,action.data]
            }
        case 'LOG_OUT':
            return{
                ...prevState,
                user: null
            }
        default:
            return prevState
    }
}

const initialState = {
   user: null,
    posts: []
}
const store = createStore(reducer,initialState)
store.subscribe(()=>{ //react-reudx 안에 들어있음
    console.log('changed') //화면 바꿔주는 코드 여기서
})
console.log(store.getState())

//action = 객체
const login = data => {
    return {
        type:'LOG_IN',
        data
    }
}
const logout = () => {
    return {
        type:'LOG_OUT'
    }
}
const addPost = data => {
    return {
        type:'ADD_POST',
        data
    }
}

store.dispatch(login({
    id: 1,
    name:'jiwon',
    admin: true
}))
console.log(store.getState())

store.dispatch(addPost({
    userId: 1,
    id: 1,
    content: '안녕하세요 리덕스'
}))
store.dispatch(addPost({
    userId: 1,
    id: 2,
    content: '두번째 리덕스'
}))
console.log(store.getState())

store.dispatch(logout())
console.log(store.getState())

冗長フォルダ構造

(データ別)

actions

post.js

user.js

reducers

index.js

post.js

user.js

index.js
複数のリスナーをマージするときにcombineReducersを使用
reducers/index.js

const {combineReducers} = require('redux')
const userReducer = require('./user')
const postReducer = require('./post')

module.exports = combineReducers({
    user: userReducer,
    posts:postReducer
})

ミドルウェア

ミドルウェアは3級関数です.

const firstMiddleware = store => next => action => {
    console.log('로깅 찍는 미들웨어', action)
  	// 앞
    next(action)//next = distpatch
  	// 뒤로 기능 추가 가능
}

function firstMiddleware(store){

    return function (next){

        return function(action){

        }
    }
}

非同期時にactionを関数で送信しthunkで実行

const thunkMiddleware = store => dispatch => action => {
    if(typeof action === "function"){ //비동기
        return action(store.dispatch, store,getState)
    }
    return dispatch(action)
}

login action

const logIn = (data) => { //async action creator
    return (dispatch, getState) => {
        dispatch(logInRequest(data))
        try{
            setTimeout(()=>{
                dispatch(logInSuccess({
                    userId: 1,
                    nickname: 'jiji'
                }))
            },2000)
        }
        catch (e) {
            dispatch(logInFailure(e))
        }
    }
}

redux-devtools

npm i reudx-devtools-extension -D

const { composeWithDevTools } = require('redux-devtools-extension')

const enhancer = process.env.NODE_ENV === "production" ?
      compose(
        applyMiddleware(
          firstMiddleware,
          thunkMiddleware,
          )
        )
      : composeWithDevTools(
  		applyMiddleware(
      	 firstMiddleware,
    	 thunkMiddleware,
    )
  )

const store = createStore(reducer, initialState, enhancer)

immer

npm i immer
きほんけいじょう
nextState = produce(prevState, (drfat)=>{})switchドアを生産中に入れる

const produce = require('immer')

const userReducer = (prevState=initialState, action) => {
  return produce(prevState, draft => {
    switch(action.type){
      case 'LOG_IN_REQUEST':
        draft.data = null
        draft.isLoggingIn = true
        break
        ....
    }
  }

リドス社の必要性

リデス自体は同期要求にすぎない.
サードパーティ:関数の実行を中間で停止でき、必要に応じて復元できるので便利です.

呼び出し:関数同期呼び出し

fork:関数非同期呼び出し

put:動作スケジューリング