Redux 복습 with 공식문서 2

아..튜토리얼이 영어인데 이게 모바일에서 그런지는 모르겠다. 아이패드만 갖고 카페에 온 상황에 타자 치는거는 너무 중노동이니 그냥 영어로 발췌하는 점 양해바람.

Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

Redux helps you manage "global" state - state that is needed across many parts of your application.

The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur. Redux guides you towards writing code that is predictable and testable, which helps give you confidence that your application will work as expected.

// Actions
const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

// Action Creators
const addTodo = text => {
  return {
    type: 'todos/todoAdded',
    payload: text
  }
}

// Reducers
const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
  // Check to see if the reducer cares about this action
  if (action.type === 'counter/increment') {
    // If so, make a copy of `state`
    return {
      ...state,
      // and update the copy with the new value
      value: state.value + 1
    }
  }
  // otherwise return the existing state unchanged
  return state
}

// Store
import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: counterReducer })

console.log(store.getState())
// {value: 0}

// Dispatch
store.dispatch({ type: 'counter/increment' })

console.log(store.getState())
// {value: 1}

// call action creators to dispatch the right action:
const increment = () => {
  return {
    type: 'counter/increment'
  }
}

store.dispatch(increment())

console.log(store.getState())
// {value: 2}

// Selectors
const selectCounterValue = state => state.value

const currentValue = selectCounterValue(store.getState())
console.log(currentValue)
// 2

SUMMARY

Redux is a library for managing global application state
- Redux is typically used with the React-Redux library for integrating Redux and React together
- Redux Toolkit is the recommended way to write Redux logic
Redux uses a "one-way data flow" app structure
- State describes the condition of the app at a point in time, and UI renders based on that state
- When something happens in the app:
          The UI dispatches an action
          The store runs the reducers, and the state is updated based on what occurred
          The store notifies the UI that the state has changed
- The UI re-renders based on the new state
Redux uses several types of code
- Actions are plain objects with a type field, and describe "what happened" in the app
- Reducers are functions that calculate a new state value based on previous state + an action
- A Redux store runs the root reducer whenever an action is dispatched

https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts

Redux 핵심, Part 1: Redux Overview and Concepts | Redux