Redux не передает состояние реквизиту - PullRequest
Новая
       5

Redux не передает состояние реквизиту

0 голосов
/ 13 ноября 2018

Я подключил компонент к хранилищу таким образом, чтобы он мог отправлять действия и получать состояние. Диспетчеризация работает, и я вижу изменение состояния в инструменте Redux dev. Однако я не могу передать состояние обратно компоненту. Что мне здесь не хватает?

Компонент

Функции 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

Спасибо!

...