CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxreducers
Vadzim
Vadzim

Reputation: 296

Correct usage of Redux store in a complex React app

I've read the docs and sorted out a few small examples, but I can not figure out how to use the Redux in an application with a large number of components. How to organize a file structure for reducers and actions, should I create a reducer for each component, or only for main app component, do I need an initial state of the store for the whole app?

E.g. I have an App (pseudocode):

<App>
    <Table data={someData}>
</App>

Table component looks like:

<Table>
    <SearchBar value={searchString}>
</Table>

<SearchBar/> is simply an input whose value affects the display of data in the <Table/>

So what is the best practice to use Redux in such case?

Upvotes: 1

Views: 251

Answers (1)

Kent V
Kent V

Reputation: 563

It very depends on developers to architect the source code. In my case, I started with small projects by putting all reducers in one files. But when I started working with bigger projects, I felt having separate reducers for each component is easier to maintain and reuse. So each component has each own reducers, actions, actionTypes, selectors, styles files.

You'd have an app reducers where you combine sub reducer. Redux handles this for you using: https://redux.js.org/docs/api/combineReducers.html

Here's how you can init app reducer:

enter image description here

Here's app reducer file:

enter image description here

Upvotes: 1

Related Questions