리액트 리듀스: 리듀서 조합:예기치 않은 키

리액트 리듀스: 리듀서 조합:예기치 않은 키

Redux 리듀서를 조합하기 전에 앱은 정상적으로 동작합니다.그러나 결합하면 initialState 키와 reducer 키가 혼재됩니다.

function flash(state = [], action) {
  switch (action.type) {
  case FLASH_MESSAGE_UPDATED:
    return _.extend({}, state, { flash: action.flash })
  default:
    return state
  }
}

function events(state = [], action) {
  switch (action.type) {
  case EVENTS_UPDATED:
    return _.extend({}, state, { events: action.pathway_events })
  default:
    return state
  }
}

export default combineReducers({
  events,
  flash
})

이로 인해 기능이 중단되고 다음과 같은 콘솔 오류가 발생합니다.

Unexpected keys "one", "two" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "events", "flash". Unexpected keys will be ignored.

나의 초기 상태는 redux-thunk의 도움으로 통과되었다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../../reducers/event'

let initialState = {
  one: globalData.one,
  two: globalData.two,
  events: globalData.events,
  flash: globalData.flash
}
let createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
let reduxStore = createStoreWithMiddleware(reducer, initialState);

React.render(
  <Provider store={reduxStore}>
    <EventListContainer />
  </Provider>,
  $('.events')[0]
)

리듀서를 올바르게 조합하려면 어떻게 해야 합니까?

추가 키에는 리듀서만 추가하면 될 것 같습니다.

function one(state = {}, action) {
  switch (action.type) {
  case ONE_UPDATED:
    return action.one
  default:
    return state
  }
}

문서에서:

combineReducers를 사용하여 리듀서를 생성한 경우, 이 리듀서는 전달된 키와 동일한 모양의 플레인오브젝트여야 합니다.그렇지 않으면, 당신은 당신의 환원제가 이해할 수 있는 어떤 것도 자유롭게 통과시킬 수 있습니다.

관련 액션을 처리할 필요가 없는 경우one또는two처음에 끌어당기기만 하면 됩니다.이 작업은 다음과 같이 간단합니다.

export default combineReducers({
  events,
  flash,
  one: (state = {}) => state,
  two: (state = {}) => state
})

dr;dr

SSR를 실행하는 경우 서버 측 번들을 다시 컴파일하십시오.

설명.

이 에러 메세지는, 서버측 렌더링(SSR)을 실행해, 리듀서 코드의 내용을 변경해, 클라이언트측에서만 재컴파일/HMR 했을 경우에 표시됩니다.

SSR를 수행할 때는 Redux 저장소를 글로벌 변수로 일련화해야 합니다(예:window.__INITIAL_STATE__클라이언트측을 초기화하면,는 그것을 읽어내, 같은 Redux 상태를 구축할 수 있습니다.

서버측에서 변경된 코드를 다시 컴파일하지 않은 경우, 클라이언트측에서는 새로운 상태(새로운 상태/변경된 상태)가 유지되고 있는 반면, 서버로부터의 초기 상태에는 오래된 키(이전 축소 키)가 포함될 수 있습니다.

Redux는 예기치 않은 키를 무시하기 때문에 기술적으로 클라이언트 측의 동작은 중단되지 않습니다.이는 서버 측의 번들을 다시 컴파일해야 한다는 것을 기억하는 유용한 경고일 뿐입니다(실제 오류는 아닙니다).생산 시 또는 수화 성능을 벤치마킹할 때 문제가 될 수 있습니다. 상태에 따라 DOM이 다를 수 있기 때문입니다.도입 프로세스에서는 클라이언트측 번들과 서버측의 번들이 자동적으로 작성되기 때문에, 이 실수는 실가동에서는 발생하지 않습니다.

언급URL : https://stackoverflow.com/questions/33677833/react-redux-combining-reducers-unexpected-keys