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 {&nbsp; componentDidMount() {&nbsp; &nbsp; this.props.getTodos();&nbsp;&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={ this.props.clearTodos }>Clear array Todos</button>&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.props.todos.map(todo => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <li key={todo.id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {todo.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}const mapStateToProps = state => {&nbsp; console.log(state.todos);&nbsp; console.log(state.todo);&nbsp; const { todos } = state;&nbsp; return {&nbsp; &nbsp; todos&nbsp; };};const mapDispatchToProps = dispatch => ({&nbsp; getTodos: () => dispatch(getTodos()),&nbsp; clearTodos: () => dispatch(clearTodos())});export default connect(mapStateToProps, mapDispatchToProps)(Todos);

Answer 2

只需将 clearTodos 操作添加到 mapDispatchToPropsconst mapDispatchToProps = dispatch => ({&nbsp; getTodos: () => dispatch(getTodos()),&nbsp; clearTodos: () => dispatch({type: CLEAR_ARRAY_TODOS})});然后你只需要在按钮被点击时处理这个动作，所以onClick在那里添加属性：<button onClick={this.props.clearTodos}>Clear array Todos</button>