javascript - 在redux中发送动作,如果在switch的reducer指令中有几种情况
问题描述
在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;
待办事项
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);
解决方案
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);
推荐阅读
- http-headers - gSoap - 从请求中解析自定义 http 标头
- c# - 由于缺少程序集(.NET 核心),通过 MetadataLoadContext 检查类型失败
- javascript - VueJS + Electron 创建 debian 安装程序不起作用(electron-installer-debian)
- c# - 自定义 XML 反序列化
- erd - 与模式的自链接重生
- r - R包序数中带有CLMM2的固定效应优势比的置信区间
- python-3.x - 如何检查压缩字符串包含多少字节?
- android - 我想从我的 android 应用分享到 whatsapp 的链接
- python - 将另一列添加到基于同一列的先前值添加的 pandas 数据框
- c# - 数据网格视图未从图像列中读取空行