Question

我很好奇渲染组件的好习惯是什么，以及如何重新渲染它以获得更新的商店。

例如，目前该项目有一个商店，可以侦听react-router并存储当前位置。

商品

export default (initialState = {slidesData}) => {

  const store = createStore(
    makeRootReducer(),
    initialState
  )

  store.asyncReducers = {}
  store.unsubscribeHistory = hashHistory.listen(updateLocation(store));

  if (module.hot) {
    module.hot.accept('./reducers', () => {
      const reducers = require('./reducers').default
      store.dispatch(reducers(store.asyncReducers))
    })
  }

  return store
}

位置缩减器

export const LOCATION_CHANGE = 'LOCATION_CHANGE';

const hash = '/#/',
      browser = '/';

// Action
export function locationChange (location = hash) {
  return {
    type: LOCATION_CHANGE,
    payload: location
  }
}


// Action creator
export const updateLocation = ({ dispatch }) => {
  return (nextLocation) => dispatch(locationChange(nextLocation))
}


// Reducer
const initialState = null;
export default function locationReducer (state = initialState, action) {
  return action.type === LOCATION_CHANGE
    ? action.payload
    : state
}

因此，在第一个应用程序加载订阅商店的组件时会收到initialState = null，当第一个路径发生更改时，商店更新和组件现在会收到"/current-route"。

为了在订阅它的组件获得"current-route"之前获得null，您能否分享您对可以采取的措施的看法。

或者如果他们收到null并触发他们的重新呈现以显示更新的商店，如何处理组件呈现？

Answer 1

我知道在调度任何操作之前获取某些内容（如路由更改或其他内容）的唯一方法是将其放入reducer的默认状态对象中。

即。 const reducer = (state = <default state object>, action) => {...

因此，在您的情况下，我建议不要使用null进行初始化，而是从window对象中获取当前路径：

// Reducer
const initialState = window.location.pathname;

反应 - 终极版。如何在第一个应用程序渲染时获取更新的存储状态

1 个答案: