在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
。在这里,我有一个问题,如函数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);