0

I am new to react hooks. We are developing a react based application without redux. We have a single page where we have different components like search, filters, grid, pagination etc.

Whenever we does any action on page , Grid should get refreshed with that action props.

For Example, when i do search on page, the grid should refresh with search props. And i apply any filter on page, the grid should refresh with filter props and search props as-well.

So, all the actions state should be available in all individual components to cal the Grid refresh api with appropriate props.

Could you please help me in understanding how we can maintain the state of whole page at each component level .

user8599269
  • 241
  • 1
  • 11

1 Answers1

0

Your project looks complex enough that it would definitely benefit from using Redux. Take a look into Redux official toolkit.

But what you can do without it, is to use context.

If you need your full state available in every component, keep it on a high level on the tree. Like the App component. Pass it to a Context.Provider and consume it using useContext. React context docs

As far as updating the state, if you are not going to use Redux, you should probably use useReducer link

Something like this:

const AppStateContext = React.createContext(null);

/* CHILD */

const Child = () => {

  const appState = React.useContext(AppStateContext);
  return(
    <div>This is appState from Child: {JSON.stringify(appState)}</div>
  );
};

/* PARENT */

const App = () => {

  const [appState,setAppState] = React.useState({foo:"bar"});

  return(
    <AppStateContext.Provider value={appState}>
      <Child/>
    </AppStateContext.Provider>
  );
};


ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336