In terms of Redux, is the view render what triggers the store to set up the initial sate? Or is the store initially set up first anyway?

user_3534132 0
Viewed 47

I read the following documentation.

Redux Application Data Flow

Earlier, we talked about "one-way data flow", which describes this sequence of steps to update the app:

  • State describes the condition of the app at a specific point in time
  • The UI is rendered based on that state
  • When something happens (such as a user clicking a button), the state is updated based on what occurred
  • The UI re-renders based on the new state For Redux specifically, we can break these steps into more detail:

Initial setup:

  • A Redux store is created using a root reducer function
  • The store calls the root reducer once, and saves the return value as its initial state
  • When the UI is first rendered, UI components access the current state of the Redux store, and use that data to decide what to render. They also subscribe to any future store updates so they can know if the state has changed.

However, does that mean that when the application is setup, the Redux store is created first, followed by the view looking at the store to render the UI components? Or is the Redux store really only setup after the view has the desire to render the UI components?

So, is it this?

Initial store set up -> View render -> Access store state -> Display UI

Or is it this?

View render -> Initial store set up -> Access store state -> Display UI

react-redux redux reactjs
1 Answers

It would be:

Initial store set up -> Access store state -> View render -> Display UI

Looking into this code:

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

  1. (Initial Store Setup): The store is first created via createStore(). Here, the entire application state tree is created.

  2. (Access store state): mapping it as props via mapStateToProps(). React would need to know the state and props required for this component to render correctly.

  3. (View Render): Then React would call the component's render() or the return of functional components.

  4. (Display UI): Then this output is mounted in the DOM or updated for state changes (cycles back to Step 2).

See React's lifecycle recap as reference.

user_80122060
Related