Redux Reducer that simply returns an action's value and not a state?

Question

I have a Container, an actionsCreator, and a reducer. In the below code, what's enabling the Reducer to return action.text instead of an updated state object? I thought reducers had to always return states.

HelloWorldContainer.jsx

 import { connect } from 'react-redux';
 import HelloWorld from '../components/HelloWorld';
 import * as actionCreators from '../actions/helloWorldActionCreators';

 const mapStateToProps = (state) => ({ name: state.name });

 export default connect(mapStateToProps, actionCreators)(HelloWorld);

helloWorldActionCreators.jsx

 import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';

 export const updateName = (text) => ({   
   type: HELLO_WORLD_NAME_UPDATE,  
   text, 
 });

helloWorldReducer.jsx

 import { combineReducers } from 'redux';
 import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';

 const name = (state = '', action) => {
   switch (action.type) {
     case HELLO_WORLD_NAME_UPDATE:
       return action.text
     default:
       return state;
   }
 };

 const mainReducer = combineReducers({ name });

 export default mainReducer;

(Code source: React on Rails).

CodinCat · Accepted Answer · 2017-03-20T07:54:49.857

3

The name is just a slice of state. And action.text is the updated state.

After combineReducers({ name }), the state tree looks like:

{
  name: '..'
}

Besides, redux doesn't limit you that you can only use object as your state. If you pass name to createStore() directly without combineReducers, your entire state will become a plain string.

edited Mar 20 '17 at 07:54

answered Mar 20 '17 at 07:36

CodinCat

15,530
5
49
60

Okay, so my next question is, inside `helloWorldReducer.jsx`, the `state` that gets passed as an argument to the reducer is *not* the entire state of the application then, but the state in the Redux store of the *property* whose value is the reducer in the object passed to `combineReducers` - but only if that's what gets passed to the `createStore` function. Am I correct in thinking this? – Matthew Hinea Mar 25 '17 at 06:38
Yes. Besides, Redux is very flexible and doesn't limit you at all. Any function that receives oldState + action and returns a new state is a reducer. You can write one single giant reducer that handle everything; or several tiny reducers and compose them arbitrarily. – CodinCat Mar 25 '17 at 06:49
the **state** doesn't always to be an object. Any strings, numbers or arrays.. everything can be a state – CodinCat Mar 25 '17 at 06:54

Shota · Answer 2 · 2017-03-20T09:52:34.830

2

I thought reducers had to always return states.

No. Reducer has to always return data. Moreover, you should not return state, but a new object (or other data types).

So what is done in your case is that the reducer returns a new string (or whatever data type is text) every time HELLO_WORLD_NAME_UPDATE action is dispatched. It does not care what was already in the state and returns a new text string.

edited Mar 20 '17 at 09:52

answered Mar 20 '17 at 07:55

Shota

6,910
9
37
67

1

A reducer does return a **new state** – CodinCat Mar 20 '17 at 07:56
Absolutely, the data that is returned from reducer will become a part of the store which is called state (the data). What I was trying to explain to the question author was that he thought he was obliged to return state object from the reducer. – Shota Mar 20 '17 at 07:59

Redux Reducer that simply returns an action's value and not a state?

2 Answers2