Redux Reducer에서 스토어의 초기 상태 확인

Redux Reducer에서 스토어의 초기 상태 확인

Redux 앱의 초기 상태는 다음 두 가지 방법으로 설정할 수 있습니다.

• 을 두 .createStore(클라이언트 링크)
• 첫 번째 인수로 (서브)서브)컴포넌트(링크)에 전달합니다.

초기 상태를 스토어에 전달하면 스토어에서 해당 상태를 읽고 이를 리듀서의 첫 번째 인수로 삼으려면 어떻게 해야 합니까?

TL;DR

combineReducers() 이와 한 수동 코드인 "Manual Code" ("Manual Code"입니다.initialState state = ...에서는, 「Reducer」가 사용되고 있기 때문에, 그 이유는 「Reducer」입니다.state리덕터에 전달되는 것은 initialState그리고 아니다 undefined따라서 ES6 인수 구문은 이 경우 적용되지 않습니다.

★★★★★★★★★★★★★★★★ combineReducers()좀 더 미묘한 행동입니다.가 음음음음음음음음음 in 로 지정되어 있는 initialState state .을 됩니다.undefined 그 때문에, 그 때문에, 그 후는, 그 후가 되어 버립니다.state = ...디폴트 인수로 지정합니다.

으로는, 「 」입니다.initialState리듀서에 의해 지정된 스테이트보다 우선합니다.이를 통해 리듀서는 초기 데이터를 기본 인수로 지정할 수 있을 뿐만 아니라 일부 영구 스토리지 또는 서버에서 저장소를 하이드레이팅할 때 기존 데이터(전체 또는 부분)를 로드할 수 있습니다.

우선 환원제가 1개 있는 경우를 생각해 봅시다.
쓴다고 해 .combineReducers().

리듀서는 다음과 같습니다.

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT': return state + 1;
  case 'DECREMENT': return state - 1;
  default: return state;
  }
}

이것으로 스토어를 작성한다고 합니다.

import { createStore } from 'redux';
let store = createStore(counter);
console.log(store.getState()); // 0

0으로 하다. ㄴ가요? 두 는 '''로 되어 있기 때문입니다.createStoreundefined은 ★★★입니다state첫 번째 감량기에 전달되었습니다.Redux가 초기화되면 상태를 채우기 위해 "더미" 액션을 디스패치합니다. 당신의 ★★★★★★★★★★★★★★★★★★★.counter는 리서는로 with with with with with with로 되었다.state에 equal undefined이것이 바로 디폴트 인수를 "활성화"하는 경우입니다.그러므로,state is금 is is이다0 「」에 statecalue(calue))state = 0 상태 「 」 )0가 반환됩니다.

다른 시나리오를 생각해 보겠습니다.

import { createStore } from 'redux';
let store = createStore(counter, 42);
console.log(store.getState()); // 42

?이에요?42가 0★★★★★★★★★★★★★★★★★★★★★.createStore라고 불렀습니다.42두 번째 인수로요.는 「」가 .state더미 액션과 함께 리듀서로 전달되었습니다.이번에는 정의되지 않았기 때문에(!), ES6 default 인수 구문은 영향을 받지 않습니다.그state42 , , , , 입니다.42환원기에서 반환됩니다.

---

그럼 에는 '먹다'를 하는 경우를 해 보겠습니다.combineReducers().
가지환원제가 : 2가지 환원제가 있습니다.

function a(state = 'lol', action) {
  return state;
}

function b(state = 'wat', action) {
  return state;
}

에 의해 combineReducers({ a, b })음음음같 뭇매하다

// const combined = combineReducers({ a, b })
function combined(state = {}, action) {
  return {
    a: a(state.a, action),
    b: b(state.b, action)
  };
}

★★★★★★★★★★★★★에 전화하면,createStore★★★★★★★★★★★★★★★★★ initialState 그럼 이제 ''를 할 거예요.state로로 합니다.{} . 러므, 。state.a ★★★★★★★★★★★★★★★★★」state.b 되다undefined「」를 호출할 a ★★★★★★★★★★★★★★★★★」b리듀서와 리듀서는 모두 인수로 수신되며 디폴트값을 지정하면 이 값이 반환됩니다.이것이 조합된 리듀서가 반환하는 방법입니다.{ a: 'lol', b: 'wat' }상태 객체

import { createStore } from 'redux';
let store = createStore(combined);
console.log(store.getState()); // { a: 'lol', b: 'wat' }

다른 시나리오를 생각해 보겠습니다.

import { createStore } from 'redux';
let store = createStore(combined, { a: 'horse' });
console.log(store.getState()); // { a: 'horse', b: 'wat' }

'마음껏'를 지정했습니다.initialState의 createStore()복합 리덕터에서 반환된 상태는 에 대해 지정된 초기 상태를 결합합니다.a)'wat' "Default"를 합니다.b리듀서가 스스로 선택했어요.

복합 환원기가 하는 일을 생각해 봅시다.

// const combined = combineReducers({ a, b })
function combined(state = {}, action) {
  return {
    a: a(state.a, action),
    b: b(state.b, action)
  };
}

「」는,state{} a「」와 .'horse' , , , , , , , 이 ,b 들판이다.★★★★★★★★★★★★★★★★★★,a가 수신되었습니다.'horse'state흔쾌히 돌려줬는데b가 수신되었습니다.undefinedstate그래서 디폴트(채무불이행)에 대한 생각을 되돌렸다.state에서는, ( 「」의 경우)'wat' 하면 .{ a: 'horse', b: 'wat' }답례로

---

Redux Redux가때하면 Redux는 Reduers로 호출됩니다.undefined처 state은 인수(인수)를 입니다).stateES6 디폴트 인수값)를 사용하면 조합된 리듀서에 대해 매우 유용한 동작을 할 수 있습니다.이 경우 함수에 전달한 오브젝트 내의 대응하는 값이 우선됩니다만, 어느 것도 전달하지 않은 경우 또는 대응하는 필드가 설정되어 있지 않은 경우, 리듀서에 의해 지정된 디폴트인수가 대신 선택됩니다.이 접근방식은 기존 데이터의 초기화 및 수화 기능을 모두 제공하므로 잘 작동하지만 데이터가 보존되지 않은 경우 개별 환원기가 상태를 재설정할 수 있습니다.물론 이 패턴을 재귀적으로 적용할 수 있습니다.combineReducers()여러 수준에서 또는 환원기를 수동으로 구성하거나 환원기를 호출하여 상태 트리의 관련 부분을 제공합니다.

요약하자면, Redux가 초기 상태를 Reduce에게 전달하기 때문에 아무것도 할 필요가 없습니다.

했을 때createStore(reducer, [initialState])첫 번째 액션이 발생했을 때 Redux에게 전달되는 초기 상태를 알려줍니다.

두 번째 옵션은 스토어를 생성할 때 초기 상태를 통과하지 못한 경우에만 적용됩니다.

function todoApp(state = initialState, action)

상태는 Redx에 의해 통과된 상태가 없는 경우에만 초기화됩니다.

어떻게 가게에서 그 상태를 읽고 그것을 환원제에서 첫 번째 논쟁으로 삼을 수 있을까요?

combine Reducers()가 대신 작업을 수행합니다.첫 번째 방법은 도움이 되지 않습니다.

const rootReducer = combineReducers({ todos, users })

그러나 다른 하나는 더 명확하다.

function rootReducer(state, action) {
   todos: todos(state.todos, action),
   users: users(state.users, action)
}

이것이 당신의 요구에 부응하기를 바랍니다(인셜스테이트를 통과하여 상태를 되돌리는 동안 리듀서를 초기화하는 것으로 이해했습니다).

이 방법은 다음과 같습니다(경고: Typescript 코드에서 복사).

는 그그 the 이다.if(!state) 출하시) 함수 mainReducer(공장 출하시)에서의

function getInitialState(): MainState {

     return {
         prop1:                 'value1',
         prop1:                 'value2',
         ...        
     }
}



const reducer = combineReducers(
    {
        main:     mainReducer( getInitialState() ),
        ...
    }
)



const mainReducer = ( initialState: MainState ): Reducer => {

    return ( state: MainState, action: Action ): MainState => {

        if ( !state ) {
            return initialState
        }

        console.log( 'Main reducer action: ', action ) 

        switch ( action.type ) {
            ....
        }
    }
}

언급URL : https://stackoverflow.com/questions/33749759/read-stores-initial-state-in-redux-reducer