Question

我以一种能够分派动作和接收状态的方式将组件连接到商店。分发工作正常，我可以在Redux开发工具中看到状态更改。但是，我无法将状态传递回组件。我在这里想念什么？

组件

已成功调度toggle（）和addTask（）。但是，newTask不接收状态。

class AddTask extends React.Component {
  state = {
    value: '',
  };

  setValue = value => this.setState({ value });

  handleInput = () => !this.props.newTask ? 'hidden' : '';
  handleToggle = () => this.props.toggle();

  handleSubmit = (e) => {
    e.preventDefault();
    const title = this.state.value;
    this.props.addTask(title);
    this.props.toggle();
  };

  render() {
    return (
      <div className="add-task">
        <div className="btn-add-task">
          <Button 
            type="LINK" 
            label="Add a Task" 
            onClick={this.handleToggle}
          />
        </div>
        <form 
          className={`task-input ${this.handleInput()}`} 
          onSubmit={this.handleSubmit}
        >
          <InputField
            placeholder="Task title"
            value={value => this.setValue(value)}
          />
        </form>
      </div>
    );
  }
};

export default AddTask;

容器

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import AddTask from './TaskList/AddTask/AddTask';

import * as actionCreators from '../actions/taskActions';

const mapStateToProps = state => ({
  newTask: state.newTask,
});

const mapDispatchToProps = dispatch => (
  bindActionCreators(actionCreators, dispatch)
);

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(AddTask);

减速器

import {
  TOGGLE_TASK,
} from '../constants/actions';

const uiReducer = (state = {
  newTask: false,
}, action) => {
  switch (action.type) {
    case TOGGLE_TASK:
      return {
        ...state,
        newTask: !state.newTask,
      };
    default:
      return state;
  }
};

export default uiReducer;

商店

const initialState = {
  tasks: [
    {
      title: 'Title A', description: 'Description A', effort: '12 hrs', editing: 'false',
    },
    {
      title: 'Title B', description: 'Description B', effort: '24 hrs', editing: 'false',
    },
    {
      title: 'Title C', description: 'Description C', effort: '', editing: 'false',
    },
  ],
  ui: {
    newTask: false,
  },
};

打印

tasks: Array(4)
0: {title: "Title A", description: "Description A", effort: "12 hrs", editing: "false"}
1: {title: "Title B", description: "Description B", effort: "24 hrs", editing: "false"}
2: {title: "Title C", description: "Description C", effort: "", editing: "false"}
3: {id: "", title: "asdfasd", description: undefined}
length: 4
__proto__: Array(0)
ui:
newTask: false

谢谢！

Redux没有将状态传递给道具

0 个答案: