首頁猿問 redux中發送actions，如...

redux中發送actions，如果switch中reducer指令有幾種情況

JavaScript

千萬里不及你 2021-11-18 20:34:37

在中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;

查看完整描述

2 回答

慕仙森

TA貢獻1827條經驗獲得超8個贊

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

反對回復 2021-11-18

吃雞游戲

TA貢獻1829條經驗獲得超7個贊

只需將 clearTodos 操作添加到 mapDispatchToProps

const mapDispatchToProps = dispatch => ({

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

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

});

然后你只需要在按鈕被點擊時處理這個動作，所以onClick在那里添加屬性：

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

反對回復 2021-11-18

2 回答
0 關注
123 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

redux中發送actions，如果switch中reducer指令有幾種情況

redux中發送actions，如果switch中reducer指令有幾種情況

2 回答

添加回答

redux中發送actions，如果switch中reducer指令有幾種情況

redux中發送actions，如果switch中reducer指令有幾種情況