This is the sixth day of my participation in Gwen Challenge

Why do you want to find new forms

In the official Redux starter example, we put all the actions in one file and all the Reducer in one file. What are the problems with this “standard” format:

  • allAction / ReducerPut it in one file, it expands indefinitely (file is too large)
  • Action 和 ReducerSeparately, implementing business logic is required to switch back and forth (inActionSend the request inReducerTo do the processing)
  • What’s in the systemActionNot intuitive (you can only open the relevant file to view)

What is the new form

You can put individual actions and reducers in the same file

  • Easy and development: don’t inactionFiles andreducerSwitch back and forth between files
  • Easy to maintain: eachactionAre small
  • Easy to test: there is only one test file for each business logic
  • Easy to understand: The file name isactionName, file list isactionThe list of

counterPlusOne.js

import { COUNTER_PLUS_ONE } from "./constants";
export function counterPlusOne() {
  return {
    type: "COUNTER_PLUS_ONE"}; }export function reducer(state, action) {
  switch (action.type) {
    case "COUNTER_PLUS_ONE":
      return {
        ...state,
        count: state.count++,
      };
    default:
      returnstate; }}Copy the code

New presentation

Let’s revamp Redux’s official ToDOS example in a new way.

Before and after directory comparison:

store

store/actions.js

Instead of static typing and Action Creator, action.js has only a list of actions names, so you can see what actions are in your project.

export { addTodo } from ".. /actions/addTodo";
export { setVisibilityFilter } from ".. /actions/setVisibilityFilter";
export { toggleTodo } from ".. /actions/toggleTodo";
export { VisibilityFilters } from ".. /actions/visibilityFilters";
Copy the code

store/reducers.js

import { combineReducers } from "redux";
import { reducer as addTodoReducer } from ".. /actions/addTodo";
import { reducer as toggleTodoReducer } from ".. /actions/toggleTodo";
import { reducer as visibilityFilter } from ".. /actions/setVisibilityFilter";

const todoRreducers = [addTodoReducer, toggleTodoReducer];

const initialState = [
  {
    id: 0.text: "Start to use Rekit!".completed: false,},];function todos(state = initialState, action) {
  let newState;
  switch (action.type) {
    // Handle cross-topic actions here
    default:
      newState = state;
      break;
  }
  return todoRreducers.reduce((s, r) = > r(s, action), newState);
}

export default combineReducers({ todos, visibilityFilter });
Copy the code

actions

A file corresponds to a business logic, which is a complete Action + Reducer process.

actions/addTodo.js

import { ADD_TODO } from ".. /constants";

export const addTodo = (text) = > ({
  type: ADD_TODO,
  text,
});

export const reducer = (state = [], action) = > {
  switch (action.type) {
    case "ADD_TODO":
      return [
        ...state,
        {
          id: state.reduce((maxId, todo) = > Math.max(todo.id, maxId), -1) + 1.text: action.text,
          completed: false,},];default:
      returnstate; }};Copy the code

actions/setVisibilityFilter.js

import { SET_VISIBILITY_FILTER } from ".. /constants";
import { VisibilityFilters } from "./visibilityFilters";

export const setVisibilityFilter = (filter) = > ({
  type: SET_VISIBILITY_FILTER,
  filter,
});

export const reducer = (state = VisibilityFilters.SHOW_ALL, action) = > {
  switch (action.type) {
    case "SET_VISIBILITY_FILTER":
      return action.filter;
    default:
      returnstate; }};Copy the code

actions/toggleTodo.js

import { TOGGLE_TODO } from ".. /constants";

export const toggleTodo = (id) = > ({
  type: TOGGLE_TODO,
  id,
});
export const reducer = (state, action) = > {
  switch (action.type) {
    case "TOGGLE_TODO":
      return state.map((todo) = >
        todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
      );
    default:
      returnstate; }};Copy the code

actions/visibilityFilters.js

import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from ".. /constants";

export const VisibilityFilters = {
  SHOW_ALL: SHOW_ALL,
  SHOW_COMPLETED: SHOW_COMPLETED,
  SHOW_ACTIVE: SHOW_ACTIVE,
};
Copy the code

Redux series

  • Redux (1) : Three pieces (Action, Reducer, Store)
  • Redux (2) : Develop applications with React
  • Redux (3) : Middleware and Asynchronous Action
  • Redux (4) : How to organize “Action” and “Reducer” files?
  • Redux (5) : How can immutable data be used to improve performance?