Reactjs accessing state of another component

To decide if you need Redux and how much of Redux do you need, you have to consider carefully the whole application you are developing. Redux adds some boilerplate, which might be too much for the benefits you would gain.

You can however solve your problem without Redux.

Without Redux

One of the key ideas under React is called "Lifting state up". This means that if several components need access to the same piece of data, you should definitely move the storage of that piece of data in a component that is a common ancestor of all those components (see https://reactjs.org/docs/lifting-state-up.html). In your case, it should not be responsibility of Timeperiod to keep memory of the selected date, but of App (indeed, the closest common ancestor of all components that need access to the selected period). Timeperiod should take the selected date from app via a property, and notify App when user changes the selected date using an event (again, a prop containing a function).

class App {
  constructor(props) {
    super(props);
    this.state = {
      start: new Date(), // initial value
      end: new Date(),   // initial value
    }
  }
  render() {
    return (
      <Timeperiod 
         start={this.state.start} 
         end={this.state.end}
         onStartChange={newValue => this.setState({ start: newValue })}
         onEndChange={newValue => this.setState({ end: newValue })}
      />
    );
  }
}

With Redux

Redux allows you to keep a global state and access it in special components called Containers. You can put how many containers you want, in any point of the document tree. This seems great, but has several drawbacks:

• Too many container components degrade performance
• Having full access to whole state in any point of the tree could create problems if you are not super careful. A component could modify some data it should not be allowed to access, and so on.
• Redux introduces some boilerplate that might be too much if the application is simple For any update you have to define some actions capable of handling it, create a reducer to produce the next state from the previous state and the action, and connect together all these pieces

Conclusion It really depends on your application whether Redux is good or bad, but if your component hierarchy is not too deep and your app not too complex, vanilla way could be better

Using redux what you could do is have a within your state a timePeriod sub state handled by a dedicated reducer which stores the user's choice.

Then each of your TimePeriod component will be hooked to this state using something like

const ConnectedTimePeriod = connect(
  state => state.timePeriod,
  {
    onTimePeriodChoose (timePeriod) {
      return {
        type: "CHOOSE_TIME_PERIOD",
        timePeriod
      }
    }
  }
)(TimePeriod);

Which hydrates your component with the global shared state and provides a function as a prop to update the time period.

The ConnectedTimePeriod can then be used everywhere and will share the global state.

I would suggest you take a look at the react-redux docs for example and details.