초기 상태를 redux로 설정하는 방법

초기 상태를 redux로 설정하는 방법

리덕스 상점의 초기 상태를 어떻게 설정할지 알아보고 있습니다.예를 들어 https://github.com/reactjs/redux/blob/master/examples/todos-with-undo/reducers/index.js을 사용하고 있습니다.todos 값이 초기화되도록 코드를 수정하려고 했습니다.

const todoApp = combineReducers({
  todos,
  visibilityFilter
}, {
  todos: [{id:123, text:'hello', completed: false}]
})

다음 문서를 참조해 주세요.

잘 안 먹히는데 왜 그런지 모르겠어요.

하기 위해서는 두 번째 논거가 되어야 한다.createStore:

const rootReducer = combineReducers({
  todos: todos,
  visibilityFilter: visibilityFilter
});

const initialState = { 
  todos: [{id:123, text:'hello', completed: false}] 
};

const store = createStore(
  rootReducer, 
  initialState
);

리듀서에서 초기 상태를 설정할 수 있습니다.

const initialTodos = [{id:123, text:'hello', completed: false}]

// this is the ES2015 syntax for setting a default value for state in the function parameters
function todoReducer(state = initialTodos, action) {
  switch(action.type) {
    ... 
  }
  return state
}


const todoApp = combineReducers({
  // todos now defaults to the array of todos that you wanted and will be updated when you pass a new set of todos to the todoReducer
  todos: todoReducer,
  visibilityFilter
})

지금까지 좋은 답변들이 있었지만 케이크는 얼려 두겠습니다.아마도 StackOverflow 코드를 복사하는 것 만이 아니라 프로그램이 왜 작동하는지 알 수 있도록 자세한 분석을 하기 위해서입니다.

이 viz에는 주로 두 가지 방법이 있습니다.1 . createStore 메서드를 사용합니다.옵션의 두 번째 인수(preloaded State 값)를 사용합니다.

const store = createStore(counter) // createStore without preloadedState
const initialState = {} // or in your case:
const initialState = {
                         initialTodos = [{id:123, text:'hello', completed: false}]
                     }
const store = createStore(counter, initialState) // create store with preloadedState

부르면createStore를 제외하고preloadedState초기화할 수 있습니다.state to {}따라서 환원기는 다음을 받을 것이다.undefined그들의 국가 가치관에 따라.그러면 두 번째 방법으로 넘어가겠습니다.

2. 에서 설정할 수 있습니다.reducers.Reducers설정할 수도 있습니다.initialState들어오는 걸 보면서state argument (which would be undefined한다면createStore에서 호출되지 않습니다.initialState디폴트로 사용하는 값을 반환합니다.

const initialState = {} // a common pattern but in your case:
const initialState = {
                         initialTodos = [{id:123, text:'hello', completed: false}]
                     }
function todoReducer(state = initialState, action) {
  switch (action.type) {
    case // your type:
      return ...
    default:
      return state
  }
}

방법 2의 단점은 대량의 데이터가 있는 경우, 예를 들어 전달하고 싶은 방대한 ToDo 목록과 같은 경우에 명백합니다.initialState'앱 와이드'방법 2는 모든 리듀서에서 동일한 작업을 수행해야 하므로 많은 반복을 가져옵니다.이것이 가장 큰 결점이다.하지만 이것은 당신이 단지 세팅하고 싶을 때 꽤 인기가 있다.initialState as {}흔한 패턴입니다.

자세한 것은, https://dev.to/lawrence_eagles/how-to-properly-set-initial-state-in-redux-78m 를 참조해 주세요.

@syslogplusb 응답에 따르면 이것이 작동하는 이유는

const rootReducer = combineReducers({
  todos: todos,
  visibilityFilter: visibilityFilter
});

첫 번째todos두 번째를 설정하는 키입니다.todos리듀서로부터의 반환값으로 사용됩니다.리듀서는 스토어 생성 시 항상 한 번 실행됩니다.글로벌 스토어가 초기화됩니다.

스토어가 생성될 때 발송되는 작업이 있습니다.이렇게 해서 각 복합 환원기에 제공된 초기 상태가 스토어에서 초기화됩니다.redux dev 툴을 선택하면 첫 번째 디스패치된 액션은 "@@redux/INIT{something}"입니다.

redux 문서에는 파일 끝에 디스패치가 있습니다({type:액션 타입INIT })

https://github.com/reduxjs/redux/blob/master/src/createStore.js#L281-L284 를 참조해 주세요.

stackoverflow에 대해 작성한 다음 질문과 답변을 참조하십시오.리액트 리덕스 스토어의 초기 글로벌 상태를 초기화하는 다른 방법은 무엇입니까?

언급URL : https://stackoverflow.com/questions/37823132/how-to-set-initial-state-in-redux