redux中发送actions，如果switch中reducer指令有几种情况

Question

在 中actions，我声明了export const CLEAR_ARRAY_TODOS = 'CLEAR_ARRAY_TODOS'; 我在reducers. 我case 'CLEAR_ARRAY_TODOS' in在 switch 语句中创建了一个新的 case reducers`：      case 'CLEAR_ARRAY_TODOS':  return {    todos: [],  };在todos组件中，我导入了 action CLEAR_ARRAY_TODOS。在这里，我有一个问题，因为在mapDispatchToProps该函数getTodos发送这个动作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;

Answer 1

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);

Answer 2

只需将 clearTodos 操作添加到 mapDispatchToProps

const mapDispatchToProps = dispatch => ({

  getTodos: () => dispatch(getTodos()),

  clearTodos: () => dispatch({type: CLEAR_ARRAY_TODOS})

});

然后你只需要在按钮被点击时处理这个动作，所以onClick在那里添加属性：

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