score:0

Accepted answer

if i am not wrong you want to implement something known as uncontrolled components. if so i will suggest you to implement it in following way.


class page extends react.component{
  static getinitialprops(){
    return {foo:"some value"}
  }
  render(){
    return <provider store={createstore(reducer,{foo:this.props.foo})}>
      <app/>
    </provider>

  }
}

then your app.js will be

@connect(mapstatetoprops,{dispatchfoo})
class app extends react.component{
 componentdidmount(){
   this.props.dispatchfoo({foo:"some new value"});
 }
 render(){
   <div>{this.props.foo}</div>
 }

}

score:0

you have 2 options:

1. use defaultprops

defaultprops can be defined as a property on the component class itself, to set the default props for the class. this is used for undefined props, but not for null props. for example:

app.defaultprops = {
    foo: true
};

see defaultprops from react's blog.

2. setup an initial state

inside your reducer you can set your state initial values, that values will be available via mapstatetoprops:

const initialstate = {
    foo: false
};

export default function(state = initialstate, action) {
    console.log('action', action);
    switch (action.type) {
        case types.some_action:
            return {
                ...state,
            foo: true
            };
        case types.another_action:
            return {
                ...state,
                foo: false
            };
        default:
            return state;
    }
}

in general, i don't see any point of overriding the same props inside mapstatetoprops as it should prevent your app from being updated by redux.


Related Query

More Query from same tag