Redux is a tool, whereas Flux is just a pattern that you can’t use, like plug and play or download it. I’m not denying that Redux has some influence from the Flux pattern, but as we can’t say, it 100% looks like Flux.
Let’s go ahead to refer to a few differences.
Redux follows three guiding principles, as shown, which will also cover the difference between Redux and Flux:
- Single store approach: We saw in the earlier diagrams that Store is pretending as an "intermediary" for all kind of state modifications within application and Redux. It is controlling direct communication between two components through the Store, a single point of communication. Here, the difference between Redux and Flux is that Flux has multiple store approaches and Redux has a single store approach.
- Read-Only State: In React applications, components cannot change state directly, but they have to dispatch change to Store through "actions". Here, Store is an object, and it has four methods, as shown:
- store.dispatch(action)
- store.subscribe(listener)
- store.getState()
- replaceReducer(nextReducer)
- Reducer Functions to change the State: Reducer function will handle dispatching actions to change the state as Redux tool doesn’t allow direct communication between two components; so it will not only change the state but also, the dispatch action will be described for state change. Reducers here can be considered as pure-function. Here are a few characteristics to write reducer functions:
- No outside database or network calls
- Returns value based on its parameters
- Arguments are "immutable"
- The same argument returns the same value
Reducer functions are called pure-functions as they are purely doing nothing except returning a value based on their set parameters; it doesn’t have any other consequences. They are recommended to have a flat state. In Flux or Redux architecture, it’s always tough to deal with nested resources, which are from APIs' return, so it’s been recommended to have a flat state in your component, such as normalize.