What logic should include a reducer, and what action?

Question

For example, I have an action:

export function addCar(carType) { return { payload: carType, type: ADD_CAR }; }

And the corresponding reducer:

 function addCar(state, action) { let { parkingPlace, truckPalce, disabledPlace, cars, sedanPlace } = state; const carType = action.payload; switch (carType) { case carsTypes.sedan: if (sedanPlace === 0 && truckPalce === 0) { swal('Error', 'No places for sedan', 'error'); break; } if (sedanPlace !== 0) { sedanPlace--; parkingPlace--; cars.push({}); break; } if (sedanPlace === 0 && truckPalce !== 0) { truckPalce--; parkingPlace--; cars.push({}); break; } break; case carsTypes.disabled: if (disabledPlace === 0 && sedanPlace === 0 && truckPalce === 0) { swal('Error', 'No places for disabled', 'error'); break; } if (disabledPlace !== 0) { disabledPlace--; parkingPlace--; cars.push({}); break; } if (disabledPlace === 0 && sedanPlace !== 0) { sedanPlace--; parkingPlace--; cars.push({}); break; } if (disabledPlace === 0 && sedanPlace === 0 && truckPalce !== 0) { truckPalce--; parkingPlace--; cars.push({}); break; } case carsTypes.truck: if (truckPalce === 0) { swal('Error', 'No places for truck', 'error'); break; } truckPalce--; parkingPlace--; cars.push({}); break; } const newState = { ...state, parkingPlace, truckPalce, disabledPlace, sedanPlace, cars }; localStorage.setItem('parking', JSON.stringify(newState)); return newState; }

Task Description: When a car drives into a parking lot, it has the type Sedan, Disabled or Truck. Only wheelchairs can be parked on the wheelchair. In ordinary places, only ordinary or disabled vehicles can be parked. All types of cars can be parked on the cargo areas, but priority is given to disabled women and trucks in the first place.

So is it worth making logic (switch, conditions) in action?

the most funny thing is that it is written in the assignment, yes

user220409 user220409 one · Accepted Answer · 2017-02-28T11:44:52

A reducer is a function that is responsible for a specific portion of an application’s state. In other words, only this function knows what to do with the data passed along with the action , and is also responsible for the immunity (immutability) of the state.

action is an object that serves to transfer data to a reducer .

The action creator is a function in which data is created for the reducer , which gets into it using action .

So all the logic is made in the action creator (I do not mean that right there, of course, you need to do a decomposition). Therefore, personally, I would have made the definition of the action type in the action creator .

UPD: I want to say separately that if the logic needed to create an action too primitive, then it can be implemented directly in the action creator . Well, in those cases in which there is no logic at all, the action creator not created at all.

Answer 2 · 2017-02-28T11:32:52

Recently, I began to study the react / redux combination and try to answer some questions and give advice, if I'm wrong, let me be corrected by more experienced people.

For example, I have an action:
export function addCar (carType) {return {payload: carType, type: ADD_CAR}; }

Everything is correct here, only action is the js-object that your function returns

 { payload: carType, type: ADD_CAR }

and addCar () is the Action Creator and its main purpose is to return action, which is the only source of information for the Store.

Action signals to the storage that something has happened ("add a car" - ADD_CAR, type of car - carType). No need to overload it with the logic of the application. Generators should be lightweight and portable.

If I understand the logic correctly, each vehicle entering can pick up some place in the parking according to its type or get a message that there are no places.

The logic that you want to use in the application, in my opinion, is better to create on the server api, to which the action creator will apply.

Suppose in a POST request to myparking.com/api/cars you send the type of car ( седан ), the server checks info in places and give you an answer ( занимай седан-место , занимай грузовик-место or гуляй - мест нет занимай грузовик-место гуляй - мест нет )

This response is received by the event creator ( action creator ) - conditionally it looks like this:

 export const getPlace = () => dispatch => { dispatch({ type: GET_PLACE_REQUEST, isLoading: true }); $.ajax(`api/cars/`).then( function(response) { dispatch({ type: GET_PLACE_SUCCESS, response: response, isLoading: false }); } ) };

let you not be confused by this form of recording, I copied an example from my code with a minimum of changes. This is the same generator, it first asks for a place, and then receives a server response with the result.

Then in reducer 'e (he is responsible for changing the state, depending on the type of action ) you will return the result

 export default function cars(state = initialState, action) { switch (action.type) { case GET_PLACE_REQUEST: return { ...state, isLoading: action.isLoading }; case GET_PLACE_SUCCESS: return { ...state, response: action.response, isLoading: action.isLoading }; default: return state; } }

here the reducer will receive the answer in the form you specify, from simple - забирай место or гуляй , to complex - выделено место типа TYPE, номер места -NNN, длительность парковки - YYY часов is выделено место типа TYPE, номер места -NNN, длительность парковки - YYY часов , which you will disassemble and use for display.

The logic will go to the server, and in the viewer you will simply change the state and it will not be overloaded as it is now

For your current code, leave the logic in the reducer, although this is a very controversial decision. But as a concept - it will, in time you will want to fix these yourself.

You can, of course, send to teach the official documentation on redux, but here are a few resources that helped me quickly enter the topic

a couple of articles on the react / redux bundle in Russian
translation of redux documentation into Russian

I absolutely agree with you, they wrote to me that the reducer was overloaded, so let's think what’s wrong here)

What logic should include a reducer, and what action?

2 answers 2

More articles: