CODEWITHSUNDEEP
reactjsreduxreact-redux
skrunic
skrunic

Reputation: 977

React-Redux component state

tl;dr I'm trying to save initial state inside a sub-container component but it gets updated to the new values every time the Redux store gets updated. I probably missed something in configuration and I need help to sort things out.

index.tsx

const store = createStore(reducers, loadedState, enhancer);
ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById(containerId)
)

AppProps.ts

function mapStateToProps(state: StoreState){
  return{
    ... // app props
    userDetails: state.userDetails // array of objects fetched by id
  }
}

function mapDispatchToProps(dispatch: ReactRedux.Dispatch<actions.AppActions>){
  return{
    ... // app methods
    detailsUpdate: (props: UpdateProps) => (dispatch(actions.detailsUpdate(props: UpdateProps)))
  }
}
ReactRedux.connect(mapStateToProps, mapDispatchToProps)(App)

Actions.ts

function detailsUpdate(props: UpdateProps): UpdateUserDetails {
    return {
        type: UPDATE_USER_DETAILS,
        props: { ... }
    }
}

Reducers.ts

export function reducers(state: StoreState, action: actions.AppActions): StoreState {    
    let newState: StoreState =  {...state};
    switch (action.type) {
        case actions.UPDATE_USER_DETAILS:
        ... // reducer code
        break;
        case actions.UPDATE_PRODUCTS:
        ... // reducer code
        break;
    return newState;
}

App.tsx

const App = (allProps: IAppProps, state: StoreState) => {
  <UserDetailsContainer
    id="generalDetails"
    userDetails={allProps.userDetails.byId}
    detailsUpdate={allProps.detailsUpdate}
  />
}

UserDetailsContainer.tsx 1

class UserDetailsContainer extends
React.Component<UserDetailsContainerProps, UserDetailsState> {    
    constructor(props: UserDetailsContainerProps) {
        super(props);      
        this.state = {
            userData: props.userDetails[props.id]
        }
    }

    render(){
       <input type="text"
        value={this.props.userDetails[this.props.id].address}
      />
    }
}

detailsUpdate triggers UPDATE_USER_DETAILS action and reducer updates store state with new value. Now, UserDetailsContainer receives updated version of userDetails from the store which is fine for displaying new value in <input type="text"> element.

However, this.state gets updated with new value which I expect shouldn't happen as constructor should be called only once (and is). This prevents me from referencing initial value in case I need it for reset or other.

Please ask for any missing information and/ or clarification and ignore any typos as the app works without errors otherwise.

1 Component usually renders another presentational component for <input type="text">which I omitted here for brevity.

Thanks!

Upvotes: 0

Views: 98

Answers (1)

butchyyyy
butchyyyy

Reputation: 355

The following only makes a shallow copy of state object.

let newState: StoreState =  {...state};

So if you assign

this.state = {
   userData: props.userDetails[props.id]
}

And then modify the array inside your reducer, you will also modify the component's state since it references the same object. This also goes against the concept of redux - reducer should not mutate it's arguments.

Note that this exact mistake is highlighted in the redux docs: https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#common-mistake-2-only-making-a-shallow-copy-of-one-level

Upvotes: 1

Related Questions