완일봉의 Redux 입문 강좌 배우기 (一) 필기

1. 장면 사용

만약 당신이 Redux가 필요한지 모르겠다면, 그것은 필요없다는 것이다
React가 도저히 해결할 수 없는 문제에 부딪혀야만 Redux가 필요하다

적용되지 않는 장면

사용자의 사용 방식은 매우 간단하다

사용자 간에 협업이 없습니다

서버와 대량의 상호작용이 필요 없고 WebSocket도 사용하지 않습니다

뷰 레이어(View)는 단일 소스에서만 데이터를 가져옵니다

Redux 적용 장면: 다중 상호작용, 다중 데이터 소스

사용자의 사용 방식이 복잡하다

서로 다른 신분의 사용자는 서로 다른 사용 방식(예를 들어 일반 사용자와 관리자)이 있다

여러 사용자 간에 협업할 수 있다

서버와 대량으로 상호작용하거나 WebSocket을 사용했습니다

View는 여러 소스에서 데이터를 가져옵니다

조직적으로 볼 때 적용되는 장면

어떤 구성 요소의 상태, 공유가 필요합니다

어떤 상태는 어느 곳에서든 얻을 수 있다

하나의 구성 요소는 전역 상태를 바꿔야 한다

한 구성 요소는 다른 구성 요소의 상태를 바꿔야 한다

2. 디자인 사상

웹 응용 프로그램은 하나의 상태기로서 보기와 상태는 일일이 대응한다

모든 상태는 하나의 대상에 저장됩니다

3. 기본 개념 및 API

1、Store

Store: 데이터를 저장하는 곳에는 전체 응용 프로그램에 하나의 스토어만 있습니다.Redux는 CreateStore 함수를 제공하여 Store를 생성합니다.

import { createStore } from 'redux'
const store = createStore(fn)

// createStore  ，  Store  

2、State

Store 객체에는 모든 데이터가 포함되어 있으며 특정 시점의 데이터를 얻으려면 Store에 스냅샷을 생성해야 합니다. 이 시점의 데이터 집합을 State라고 합니다.
현재 시간의 State는store를 통해 가능합니다.getState () 지원

import { createStore } from 'redux'
const store = createStore(fn)

const state = store.getState()

Redux는 하나의 State가 하나의 View에 해당하도록 규정합니다.State만 같으면 View는 동일합니다.State를 알면 View가 어떤지 알 수 있고, 반대로

3、Action

State의 변화는 View의 변화를 초래합니다.그러나 사용자는 State를 접하지 못하고 View를 접할 수 있기 때문에 State의 변화는 View로 인해 이루어져야 한다.Action 은 View 의 알림으로, State 가 변경될 것 임을 나타냅니다.
Action은 객체입니다.그중의 type 속성은 필수입니다. Action의 이름, 기타 속성의 자유 설정을 나타냅니다.

const action = {
    type: 'ADD_TODO',
    payload: 'learn redux'
}

4、Action Creator

Action을 생성하는 함수를 정의합니다. 이 함수를 Action Creator라고 합니다.

const ADD_TODO = '  TODO'

function addTodo(text) {
    return {
        type: ADD_TODO,
        text
    }
}
const action = addTodo('learn redux')

5、 store.dispatch()

store.dispatch()는 View에서 Action을 보내는 유일한 방법store입니다.dispatch는 Action 객체를 매개 변수로 받아들여 보냅니다.

6、 Reducer

Store에서 Action을 받은 후 View가 변경될 수 있도록 새 State를 제시해야 합니다. 이 State의 계산 과정을 Reducer라고 합니다.
Reducer는 Action과 현재 State를 매개 변수로 받아들여 새 State를 되돌려주는 함수입니다.

const reducer = function (state, action ) {
    return newState
}

Reducer 함수는 수동으로 호출할 필요가 없습니다.store.dispatch 메서드는 Reducer의 자동 실행을 자동으로 터치합니다.이를 위해 Store는 Reducer 함수를 알아야 합니다. 방법은 Store를 생성할 때 Reducer를createStore에 전송하는 방법입니다.

import { createStore } from 'redux'
const store = createStore(reducer)

7. 순함수

Reducer 함수의 가장 중요한 특징: Reducer는 순수한 함수입니다.

순수 함수의 제약

매개 변수를 고쳐서는 안 된다

시스템 I/O의 API를 호출할 수 없습니다

날짜를 호출할 수 없습니다.now() 또는 Math.random () 등 불순한 방법은 매번 다른 결과를 얻기 때문이다

// State  
function reducer(state, action) {
    return Object.assign({}, state, { thingToChange })
    //  
    return { ...state, ...newState }
}

// State  
function reducer(state, action) {
    return [...state, newItem]
}

8、store.subscribe()

Store에서 Store를 사용할 수 있습니다.subscribe 방법은 감청 함수를 설정하고 State가 변하면 자동으로 이 함수를 실행합니다

import { createStore } from 'redux'
const store = createStore(reducer)
store.subscribe(listener)

View의 업데이트 함수 (구성 요소의render,setState) 를 listener에 넣으면 View의 자동 렌더링
store.subscribe 방법은 함수를 되돌려줍니다. 이 함수를 호출하면 감청을 해제할 수 있습니다.

let unsubscribe = store.subscribe(() => {
    console.log(store.getState())
})

4. Store의 실현

Store에서 제공하는 방법

store.getState()

store.dispatch()

store.subscribe()

createStore 방법은 두 번째 파라미터를 받아들여 State의 초기 상태를 나타낼 수 있습니다.이것은 보통 서버에서 주는 것이다

let store = createStore(todoApp, window.STATE_FROM_SERVER)

window.STATE_FROM_SERVER: 전체 응용 프로그램의 상태 초기 값입니다.이 인자를 제공하면 Reducer 함수의 기본 초기값을 덮어씁니다.
createStore의 간단한 구현

const createStore = (reducer) => {
    let state
    let listeners = []
    
    const getState = () => state
    const dispatch = (action) => {
        state = reducer(state, action)
        listeners.forEach(listener => listener())
    }
    
    const subscribe = (listener) => {
        listeners.push(listener)
        
        return () => {
            listeners = listeners.filter(l => l !== listener)
        }
    }
    
    dispatch({})
    return { getState, dispatch, subscribe }
}

5. Reducer의 분할

Redux는 Reducer의 분할에 사용되는 combineReducers 방법을 제공합니다

import { combineReducers } from 'redux'
const chatReducer = combineReducer({
    a: chatLog,
    b: stateMessage,
    c: userName
})
export default todoApp

combine Reducer의 간단한 실현

const combineReducers = reducers => {
    return (state = {}, action) => {
        return Object.keys(reducers).reducer(
            (nextState, key) => {
                nextState[key] = reducers[key](state[key], action)
                return nextState
            }
        )
    }
}

너는 모든 하위 Reducer를 하나의 파일에 넣은 후에 통일적으로 도입할 수 있다

import { combineReducers } from 'redux'
import * as reducers from './reducers'

const reducer = combineReducers(reducers)

6. 워크플로우

우선, 사용자가 Action을 보냅니다

store.dispatch(action)

그리고 Store에서 자동으로 Reducer를 호출하여 현재 State와 받은 Action 두 개의 인자를 전송합니다.Reducer가 새 State로 돌아갑니다

let nextState = todoApp(previousState, action)

State가 변경되면 Store에서 감청 함수를 호출합니다.

//  
store.subscribe(listener)

listener는store를 통해 사용할 수 있습니다.getState () 가 현재 상태를 가져옵니다.React를 사용하는 경우 View 다시 렌더링을 트리거할 수 있습니다.

function listener () {
    let newState = store.getState()
    component.setState(newState)
}