reactjs+antd版的todolist实现的四种方式(二)——redux的实现

这一版本的实现效果

谨遵数据交互的思路！！！！！！！！！

入口文件 index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import store from "./store";

// redux无法跨层级传递数据，这种方式局限性，不管怎样，我们先实现效果
const render = () => {
  console.log(store.getState(), "store.getState()");
  ReactDOM.render(
    <App
      data={store.getState().counterReducer}  //获取最新的store数据
      onAdd={() => store.dispatch({ type: "INCREMENT" })}
      onJianFa={() => store.dispatch({ type: "DECREMENT" })}
    />,
    document.getElementById("root")
  );
};
render();

store.subscribe(render);

//storejs

import { counterReducer } from "./reducer";
import TodoLists from "./todoReduce";
//多个reducer的拆分使用方法
import { combineReducers, createStore } from "redux";
const reducers = combineReducers({
  counterReducer,
  TodoLists,
});
const store = createStore(reducers);
export default store;

//App.js文件的props传递

import TodoComponents from "./components/TodoComponents";
import "./App.css";
function App(props) {
  let { data, addItem, deleteItem, checkItem } = props;
  return (
    <div>
      <TodoComponents
        data={data}
        addItem={addItem}
        deleteItem={deleteItem}
        checkItem={checkItem}
      ></TodoComponents>
    </div>
  );
}

export default App;

//TodoComponents.js

import React, { Component } from "react";
import "./Todo.css";
import { Button, Input, List, Checkbox, Radio } from "antd";
class TodoComponents extends Component {
  state = {
    title: "",
    radioValue: "a",
  };
  addItemToLists = () => {
    console.log(this.state.title);
    this.setState({
      title: "",
    });
    this.props.addItem({
      title: this.state.title,
      isSelect: false,
    });
  };
  changeValue = (key, e) => {
    this.setState({
      [key]: e.target.value,
    });
  };
  deleteItem = (index) => {
    this.props.deleteItem(index);
  };
  changeChecked = (index) => {
    console.log(this.state.list, "onChange");
    this.props.checkItem(index);
  };
  changeRadio = (e) => {
    const value = e.target.value;
    this.setState({
      radioValue: e.target.value,
    });
    }
  };
  render() {
    let { title, radioValue } = this.state;
    let { list } = this.props.data.TodoLists;

    //计算总数
    const totalSum = list.length;
    //计算已完成
    const hasFinished = list.filter((item) => item.isSelect).length;
    //计算未完成
    const noFinished = list.filter((item) => !item.isSelect).length;
    return (
      <div className="content">
        <Input
          value={title}
          allowClear
          onPressEnter={this.addItemToLists}
          onChange={(e) => this.changeValue("title", e)}
          style={{ width: "200px" }}
        />
        <Button onClick={this.addItemToLists} type="primary">
          确定
        </Button>
        <div style={{ width: "258px" }}>
          <List
            bordered
            dataSource={list}
            renderItem={(item, index) => {
              return (
                <div>
                  <List.Item>
                    <Checkbox onChange={() => this.changeChecked(index)} />
                    <span className={item.isSelect ? "isChecked" : ""}>
                      {item.title}
                    </span>
                    <Button onClick={() => this.deleteItem(index)}>删除</Button>
                  </List.Item>
                </div>
              );
            }}
          />
        </div>
        <div>
          <Radio.Group
            value={radioValue}
            size="large"
            onChange={this.changeRadio}
          >
            <Radio.Button value="a">
              <span>全部:{totalSum}</span>
            </Radio.Button>
            <Radio.Button value="b">
              <span>已完成:{hasFinished}</span>
            </Radio.Button>
            <Radio.Button value="c">
              <span>未完成:{noFinished}</span>
            </Radio.Button>
          </Radio.Group>
        </div>
      </div>
    );
  }
}

export default TodoComponents;

//todoReduce,js重点-----将组件内的数据计算转移到了reducer之中

function TodoLists(
  state = {
    list: [],
  },
  actions
) {
  switch (actions.type) {
    case "addItem":
      return { ...state, list: [...state.list, actions.payload] };
    case "deleteItem":
      let list = state.list;
      list.splice(actions.payload, 1);
      return { ...state, list };
    case "checkedItem":
      let lists = state.list;
      lists[actions.payload].isSelect = !lists[actions.payload].isSelect;
      return { ...state, list: lists };
    default:
      return state;
  }
}

//封装的actionCreators方法
export function addItem(data) {
  return {
    type: "addItem",
    payload: data,
  };
}
export function deleteItem(index) {
  return {
    type: "deleteItem",
    payload: index,
  };
}

export function checkedItem(index) {
  return {
    type: "checkedItem",
    payload: index,
  };
}
export default TodoLists;

总结

这样，我们实现了跟上一个版本一样的功能