剧场模式
首页前端ReduxReact & Redux 实战 Reminder Pro 项目

React & Redux 实战 Reminder Pro 项目 #2 显示列表

求知小风 · 真仙发布于
4

src/components/App.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addReminder } from '../actions';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text: ''
    };
  }

  addReminder() {
    this.props.addReminder(this.state.text);
  }

  renderReminders() {
    const { reminders } = this.props;
    return (
      <ul className="list-group col-sm-8 mt-2">
        {
          reminders.map(reminder => {
            return (
              <li key={ reminder.id } className="list-group-item">
                <div className="list-item">
                  <div>{ reminder.text }</div>
                  <div><em>time</em></div>
                </div>
              </li>
            );
          })
        }
      </ul>
    );
  }

  render() {
    return (
      <div className="App">
        <div className="title">Reminder Pro</div>

        <div className="form-inline">
          <div className="form-group mr-2">
            <input
              type="text"
              className="form-control"
              placeholder="I have to..."
              onChange={ (event) => this.setState({text: event.target.value}) }
            />
          </div>
          <button
            type="button"
            className="btn btn-success"
            onClick={ () => this.addReminder() }
          >
            Add Reminder
          </button>
        </div>
        { this.renderReminders() }
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    reminders: state
  };
};

export default connect(mapStateToProps, { addReminder })(App);

src/actions/index.js

import { ADD_REMINDER } from '../constants';

export const addReminder = (text) => {
  return {
    type: ADD_REMINDER,
    text
  }
};

src/reducers/index.js

import { ADD_REMINDER } from '../constants';

const reminder = (action) => {
  return {
    text: action.text,
    id: Math.random()
  }
};

const reminders = (state = [], action = {}) => {
  switch(action.type) {
    case ADD_REMINDER:
      return [
        ...state,
        reminder(action)
      ]
    default: return state;
  }
}

export default reminders;
7 条回复
  • lff · 合体
    lff · 合体 #1

    这里已经返回的是数组格式但是浏览器里面还是打印的对象

  • mzyd · 大乘
    mzyd · 大乘 #2

    那个日期的选项只要有一个没选 dueDate 就是空值~ 测试的时候记得都选上哦~

  • benli615349 · 元婴
    benli615349 · 元婴 #3

    case ADD_REMINDER:
    return [
    ...state,
    reminder(action)
    ]

    reducer里面应该用{}, 而不是 []
    我很讶异,你的代码是如何运行的

  • benli615349 · 元婴
    benli615349 · 元婴 #4

    constructor(props) {
    super(props)
    this.state = {
    text: ''
    };
    }

    这个代码在我们公司code review过不了

  • benli615349 · 元婴
    benli615349 · 元婴 #5

    使用一个随机数做key,这样dispatch 了这个action之后都会做强制更新,会产生不必要的re-rendering。另外你为什么要这么麻烦做一个id在reducer里面呢?为什么不直接
    reminders.map((reminder, index) => {
    return (


    { reminder.text }
    time


    );
    })

  • JesusCracker · 太乙

    是的 谢谢

  • JesusCracker · 太乙

    嗯 item index也可以

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:145

Top