Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Parent component update state but child component state to be out of sync #1158

Closed
kunlongxu opened this issue Jan 8, 2019 · 1 comment
Closed

Comments

@kunlongxu
Copy link

What is the current behavior?

When dispatch an action in parent component the child component does not get newest state.
reproduce link

import { Component } from "react";
import React from "react";
import { connect, Provider } from "react-redux";
import { createStore } from "redux";
const ReactReduxContext = require("react-redux").ReactReduxContext;

export function bundleComponent(Component: any) {
  return (props: any) => (
    <div {...props}>
      <ReactReduxContext.Consumer>
        {({ store }: { store: any }) => <Sup store={store} />}
      </ReactReduxContext.Consumer>
    </div>
  );
}
class Sub extends Component<any> {
  render() {
    return <div />;
  }
}
const mapStatesToProps = (state: any) => {
  console.log(state, "mapStatesToProps");

  return {};
};
const reduers = (state: {}, action: any) => {
  switch (action.type) {
    case "hitit":
      return Object.assign({}, state, action.state);
    default:
      return state;
  }
};
const store = createStore(reduers, {});

const HocComponent = connect(mapStatesToProps)(Sub);

class Sup extends Component<{ store: any }> {
  componentWillMount() {
    console.log("sup dispatch");
    this.props.store.dispatch({
      type: "hitit",
      state: {
        newfield: 999
      }
    });
  }
  render() {
    return <HocComponent />;
  }
}

export default class AsyncStateFunc extends Component {
  render() {
    let AComponent = bundleComponent(Sup);
    return (
      <Provider store={store}>
        <AComponent />
      </Provider>
    );
  }
}

I find this in source code, the variable storeState does not update.If change to store.getState(),I will get expected.

const { storeState, store } = value

What is the expected behavior?

Hope state is same all the time.

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux?

react 16.7.0
react-redux 6.0

@timdorr
Copy link
Member

timdorr commented Jan 8, 2019

Dupe of #1126

@timdorr timdorr closed this as completed Jan 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants