在 Redux 中更改存储时如何重新渲染组件？

Question

我正在尝试使用 Redux 制作我的第一个应用程序，我已经制作了一个不使用 Redux 的版本，我知道这不一定需要 Redux，但我想学习 Redux。

我有一个商店，其中包含一系列待办事项，我的操作成功调度并更新了商店。

我的任务组件列表连接到存储并将数组中的每个项目呈现为它自己的组件。

在初始加载时，我的待办事项列表会显示商店初始状态中的待办事项，但是一旦我更新状态，该状态中的新项目就不会被渲染。相反，返回组件数组的 map 方法说它“无法读取未定义的属性 'map'”。

我该如何解决这个问题？

干杯。

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import Container from './components/Container.js'
import TaskReducer from './reducers/Task.js'

require("./index.css");

const defaultState = {
  items: [
    "task 1",
    "task 2"
  ]
};

const store = createStore(TaskReducer, defaultState);

// Allows access to store in console log
window.store = store;

ReactDOM.render( (
  <Provider store={store}>
    <Container />
  </Provider>
  ),
  document.getElementById('wrapper')
);

import React from 'react';
import ReactDOM from 'react-dom';
import TaskList from './TaskList.js';
import { createStore, bindActionCreators } from 'redux';
import * as ActionCreators from '../actions/Task.js';
import Redux from 'redux';
import {connect} from 'react-redux'

class Container extends React.Component {
  constructor() {
    super();
  }

  render() {
    // What does this do???
    const {dispatch} = this.props;
    const deleteItem = bindActionCreators(ActionCreators.deleteTodoItem, dispatch);
    const addItem = bindActionCreators(ActionCreators.addTodoItem, dispatch);

    function _onSubmit(e) {
      e.preventDefault();
      addItem(e.target.elements.task.value);
      // Resets the form
      e.target.reset();
    }

    return (
      <div className="">
        <header className="header">
          <h1>To Do:</h1>
        </header>
          <form autoComplete="off" onSubmit={_onSubmit}>
            <input name="task" placeholder="Task" autoComplete="off"></input>
          </form>
          <TaskList />
      </div>
    );
  }
}

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

export default connect(mapStateToProps)(Container);

import React from 'react';
import Task from './Task';
import { connect } from 'react-redux';

let TaskList = (props) => {
  console.log('items', props.items);
  var tasks = (props.items).map( (item, key) => { return <Task data={item} key={key} listItemKey={key} /> })

  return(
    <ul className="task-list">
      {tasks}
    </ul>
  );
}

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

export default connect(mapStateToProps)(TaskList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

import * as action from '../actions/Task.js'

export default function toDoItems(state = [], action) {
  switch(action.type) {
    case 'DELETE_ITEM':
      return [
        ...state,
      ];

    case 'ADD_ITEM':
      console.log('ADD ITEM');
      console.log('Submitted value = ', action.submittedValue)
      return [
        ...state,
        // Reducer gets action object item and appends to array
        action.submittedValue
      ]

    default:
      return state;
  }
}

--- 减速器---

import * as action from '../actions/Task.js'

export default function toDoItems(state = [], action) {
  switch(action.type) {
    case 'DELETE_ITEM':
      return [
        ...state,
      ];

    case 'ADD_ITEM':
      console.log('ADD ITEM');
      console.log('Submitted value = ', action.submittedValue);
      console.log('the state', state);
      return [
        ...state,
        // Reducer gets action object item and appends to array
        action.submittedValue
      ]

    default:
      return state;
  }
}

--- 行动 ---

export function addTodoItem(submittedValue) {
  return {
      type: 'ADD_ITEM',
      // The action object returned has the submittedValue
      submittedValue
  }
}

export function deleteTodoItem() {
  return {
      type: 'DELETE_ITEM',
  }
}

Answer 1

我已经编辑了 TaskList 组件。您没有正确使用地图功能

import React from 'react';
import Task from './Task';
import { connect } from 'react-redux';

let TaskList = (props) => {
console.log('items', props.items);
var tasks = undefined;
if(props.items && props.items.length > 0 ){
  tasks = props.items.map( (item, key) => { return <Task data={item} 
  key={key} listItemKey={key} /> })
} //edited code

  return(
    <ul className="task-list">
      {tasks}
    </ul>
  );
}

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

export default connect(mapStateToProps)(TaskList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

至于商店，请使用以下内容在您的主文件中配置商店。 ...

import TaskReducer from './reducers/Task.js';
import * as redux from 'redux';
function configure(initialState = {}){
    const reducers = redux.combineReducers({
        tasks : TaskReducer 
    });

    let store = redux.createStore(reducers, initialState);

    return store;
};

const store = configure();
// Allows access to store in console log
window.store = store;

ReactDOM.render( (
  <Provider store={store}>
    <Container />
  </Provider>
  ),
  document.getElementById('wrapper')
);