Redux: reducer returning same state

JavaScript
1

Does anyone know if react-redux will trigger re-render in case reducer returns unchanged state

export default const reducer = (state, action) => state;

(Sorry, traveling with the phone and too uncomfortable to check myself)

2

Basic workflow of using React Redux.

  1. At the start of the application, we fire an action that fetches all the posts from the MongoDB database, if the data is not there then we display no posts.
  2. When we add a new post then first it fires an action that sends a POST request to the node.js server and express saves the data in the database and return that data in the JSON format.
  3. We get the json data when the promise resolves, and then we fire another action that calls the reducer function and saves the data in the Redux store.
  4. So, when we change the state using the Redux, the UI will change, and we get our first post at the front end.
  5. As we know, we use the database so that data will be persisted and you can verify that by refreshing the page, you get the same data.
  6. We do same for the delete, when we click the button, first it will send a delete request to the server and delete the document from mongodb, and then we pass the id to reducer function and filter it out our posts as well.

Find more on this Redux example.

3

@KrunalLathiya, do you think this answered my question? :slight_smile: Or you don’t care and just promoting your article?

4

Answering my own question and also for those who might be wondering: NO, the connect wrapper will not trigger re-rendering in general. There is a catch, as it will compare previous and incoming states by reference and not by value, so any of these will trigger false re-render:

return [...state, ...sameDataFromFetchThatIAlreadyHave];
return [...state, ...[]];
return [...state];

Why I was bothering in the first place? I wanted to know if I can use redux not only as centralized state manager, but also as centralized action manager where I’ll have special reducer that will do all sorts of side-effects with DOM events that do not cause the change of app’s state. And it turns out, it’s possible and it opens doors for much cleaner code and patterns: useDispatch() will be the only gateway between view and business logic - kinda neat!

1 Like