在redux中发送动作，如果在switch的reducer指令中有几种情况答案

【问题标题】：Sending actions in redux, if there are several cases in the reducer instruction in switch在redux中发送动作，如果在switch的reducer指令中有几种情况
【发布时间】：2020-02-10 08:11:37
【问题描述】：

在actions，我声明了动作export const CLEAR_ARRAY_TODOS = 'CLEAR_ARRAY_TODOS'; 我在reducers 中导入了这个动作。我在 switch 语句中创建了一个新案例case 'CLEAR_ARRAY_TODOS' in reducers`：

 case 'CLEAR_ARRAY_TODOS':
  return {
    todos: [],
  };

在todos 组件中，我导入了动作CLEAR_ARRAY_TODOS。在这里我有一个问题，如函数getTodos 中的mapDispatchToProps 发送此操作CLEAR_ARRAY_TODOS 并连接到按钮Clear Array Todos？

在这里演示：https://stackblitz.com/edit/react-iuvdna?file=reducers%2Findex.js

操作

import axios from 'axios';

export const GET_TODOS = 'GET_TODOS';
export const CLEAR_ARRAY_TODOS = 'CLEAR_ARRAY_TODOS';
export const FETCH_SUCCESS = 'FETCH_SUCCESS';
export const FETCH_FAILURE = 'FETCH_FAILURE';

export const getTodos = () => 
dispatch => {

  return axios({
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: 'GET',
    })
    .then(({data})=> {
      console.log(data);

      dispatch({type: GET_TODOS, payload:{
        data 
      }});   
    })
    .catch(error => {
      console.log(error);

      dispatch({type: FETCH_FAILURE})
    });
};

export const getTodo = () => 
dispatch => {

  return axios({
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: 'GET',
    })
    .then(({data})=> {
      console.log(data);

      dispatch({type: GET_TODOS, payload:{
        data 
      }});   
    })
    .catch(error => {
      console.log(error);

      dispatch({type: FETCH_FAILURE})
    });
};

减速器

import {GET_TODOS, CLEAR_ARRAY_TODOS} from '../../actions';

const initialState = {
  todos: []
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'GET_TODOS':
      return {
        ...state,
        todos: action.payload.data,
        todo: action.payload.data[0]
      };
     case 'CLEAR_ARRAY_TODOS':
      return {
        todos: [],
      };
    default:
      return state;
  }
};

export default rootReducer;

待办事项

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {getTodos, CLEAR_ARRAY_TODOS} from '../.././actions';

class Todos extends Component {
  componentDidMount() {
    this.props.getTodos(); 
  }

  render() {
    return (
      <div>
        <button>Clear array Todos</button>
        <ul>
          {this.props.todos.map(todo => {
          return <li key={todo.id}>
                    {todo.title}
                </li>
          })}
        </ul>
      </div>
    );
  }
}

const mapStateToProps = state => {
  console.log(state.todos);
  console.log(state.todo);
  const { todos } = state;

  return {
    todos
  };
};

const mapDispatchToProps = dispatch => ({
  getTodos: () => dispatch(getTodos())
});

export default connect(mapStateToProps, mapDispatchToProps)(Todos);

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

只需将 clearTodos 操作添加到 mapDispatchToProps

const mapDispatchToProps = dispatch => ({
  getTodos: () => dispatch(getTodos()),
  clearTodos: () => dispatch({type: CLEAR_ARRAY_TODOS})
});

那么你必须只在点击按钮时处理这个动作，所以在那边添加onClick属性：

<button onClick={this.props.clearTodos}>Clear array Todos</button>

【讨论】：

【解决方案2】：

CLEAR_ARRAY_TODOS 不是一个动作，只是一个保存动作类型字符串的变量。您应该添加一个clearTodos 操作

export const clearTodos = { type: CLEAR_ARRAY_TODOS }

或动作创建者

export const clearTodos = () => ({ type: CLEAR_ARRAY_TODOS })

并在你的组件mapDispatchToProps 中使用它（就像你使用getTodos 一样）

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {getTodos, clearTodos} from '../.././actions';

class Todos extends Component {
  componentDidMount() {
    this.props.getTodos(); 
  }

  render() {
    return (
      <div>
        <button onClick={ this.props.clearTodos }>Clear array Todos</button>
        <ul>
          {this.props.todos.map(todo => {
          return <li key={todo.id}>
                    {todo.title}
                </li>
          })}
        </ul>
      </div>
    );
  }
}

const mapStateToProps = state => {
  console.log(state.todos);
  console.log(state.todo);
  const { todos } = state;

  return {
    todos
  };
};


const mapDispatchToProps = dispatch => ({
  getTodos: () => dispatch(getTodos()),
  clearTodos: () => dispatch(clearTodos())
});

export default connect(mapStateToProps, mapDispatchToProps)(Todos);

【讨论】：