mapStateToProps道具的初始值，然后仅状态

Question

I have React component that is given some props. The props are given that a mapStateToProps.

const mapStateToProps = (state, {props}) => {
    return {
      feeds: props.feeds,
      feedEntries: props.feedEntries,
      ....

Once the user starts interacting with the UI, they can change the state. At this point, the component needs to update itself with state not props .

const mapStateToProps = (state, {props}) => {
    return {
      feeds: state.feeds,
      feedEntries: state.feedEntries,
      ....

How do you bootstrap a mapStateToProps function to first use the props given to the component directly upon first load. Then following, only state it's data state?

Answer 1

Use a ternary to check if the state property is undefined , and take the props value accordingly:

const mapStateToProps = (state = {}, props) => {
    return {
      feeds: state.feeds === undefined ? props.feeds : state.feeds,
      feedEntries: state.feedEntries === undefined ? props.feedEntries : state.feedEntries,
      ....

If you know that the properties won't have a falsy value (false, null, 0, etc...) as a legitimate value, you can replace the ternary with short-circuit evaluation :

const mapStateToProps = (state = {}, props) => {
    return {
      feeds: state.feeds || props.feeds,
      feedEntries: state.feedEntries || props.feedEntries,
      ....

Answer 2

我建议您采取另一种方法，而不是中断mapStateToProps函数流，而最好从props获取内部值，然后由用户更改的值保存在状态上，您的render函数应支持该状态并检查是否是否收到任何用户数据

Answer 3

Ended up doing the following..

export default (initProps) => {
  const combinedState = {
    ...defaultState,
    ...initProps,
  };
  return createStore(
    reducer,
    combinedState,
    applyMiddleware(logger, thunk),
  )
};

Created a function that wraps the createStore function.. which takes an object composed of 1). the props given to the main component (initProps) and 2). defaultProps — a JS object imported into this file with the default shape of the store, the init props overriding any of the values in defaultProps.

export default (props) => {
  const store = configStore(props);
  return (
    <Provider store={store}>
      <Editor props={{ ...props }} />
    </Provider>
  )
}

The main component is takes in props, passes those props to the config store function. The store is built using the combined object above.