Redux的使用

一、安装

npm install --save redux;

二、新建目录管理redux

三、./redux/index.js

// 创建store仓库，reducer注入
import {createStore} from 'redux'
import reducer from "./reducer"
const store =createStore(reducer);
export default store;
// store 是唯一的
// 只有store能改变state，reducer不能

四、./redux/actionTypes.js

export const CAHNGEINPUTVALJUE  ="changeInputValue";
export const INPUTFOCUS  ="inputFocus";
export const ADDITEM  ="addItem";
export const DELITEM  ="delItem";
export const GETLISTACTION  ="getList";

五、./redux/actions.js

import {
  CAHNGEINPUTVALJUE,
  INPUTFOCUS,
  ADDITEM,
  DELITEM,
  GETLISTACTION
} from './actionTypes.js';
export const changeInputAction = value => ({
  type: CAHNGEINPUTVALJUE,
  value
});
export const addListAction = value => ({
  type: ADDITEM,
  value
});
export const delItemAction = value => ({
  type: DELITEM,
  value
});
export const inputFocusAction = value => ({
  type: INPUTFOCUS,
  value
});
export const getListAction = value => ({
  type: GETLISTACTION,
  value
});

六、./redux/reducer.js

import {
  CAHNGEINPUTVALJUE,
  INPUTFOCUS,
  ADDITEM,
  DELITEM,
  GETLISTACTION
} from './actionTypes.js';
// 定义了一些固定的数据
const defaultState = {
  inputValue: 'Write Something',
  list: [
    '早上8点开晨会，分配项目',
    '早上9点开晨会，分配项目',
    '早上10点开晨会，分配项目',
    '早上11点开晨会，分配项目'
  ]
};
 // Reducer里只能接收state，不能改变state；
 // Reducer 是纯函数--纯函数是指返回值有参数决定的函数；
export default (state = defaultState, action) => {
  if (action.type === CAHNGEINPUTVALJUE) {
    let newState = JSON.parse(JSON.stringify(state));
    newState.inputValue = action.value;
    return newState;
  }
  if (action.type === INPUTFOCUS) {
    let newState = JSON.parse(JSON.stringify(state));
    newState.inputValue = '';
    return newState;
  }
  if (action.type === ADDITEM) {
    let newState = JSON.parse(JSON.stringify(state));
    newState.list.push(newState.inputValue);
    newState.inputValue = '';
    return newState;
  }
  if (action.type === DELITEM) {
    let newState = JSON.parse(JSON.stringify(state));
    newState.list.splice(action.value, 1);
    return newState;
  }
  if (action.type === GETLISTACTION) {
    let newState = JSON.parse(JSON.stringify(state));
    newState.list=action.list;
    return newState;
  }
  return state;
};

七、React的UI组件的封装：TodeListUI.js

import React from 'react';
import { Input, Button, List } from 'antd';

// 无状态组件：没有业务逻辑的纯UI组件；
const TodoListUI = props => {
  return (
    <div>
      <div style={{ margin: '10px' }}>
        <Input
          placeholder={props.inputValue}
          style={{ width: '350px', marginRight: '10px' }}
          value={props.inputValue}
          onFocus={props.inputFocus}
          onChange={props.changeInputValue}
          onKeyUp={props.enterAddList}
        ></Input>
        <Button type="primary" onClick={props.addList}>
          增加
        </Button>
      </div>
      <div style={{ margin: '10px', width: '450px' }}>
        <List
          bordered
          dataSource={props.list}
          renderItem={(item, index) => (
            <List.Item
              key={index}
              actions={[]}
              onClick={() => {
                props.delItem(index);
              }}
            >
              {item}
            </List.Item>
          )}
        />
      </div>
    </div>
  );
};
export default TodoListUI;

八、React的UI组件对应的JS文件封装

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import TodoListUI from './TodeListUI';
import store from './redux';
import {
  changeInputAction,
  inputFocusAction,
  addListAction,
  delItemAction,
  getListAction
} from './redux/actions.js';

const IconText = ({ icon }) => (
  <span>
    {React.createElement(icon, {
      style: { color: '#1890ff', fontSize: '16px' }
    })}
  </span>
);
class TodoList extends Component {
  constructor(props) {
    super(props);
    //获取store里面的值
    this.state = store.getState();

    this.storeChange = this.storeChange.bind(this);
    this.inputFocus = this.inputFocus.bind(this);
    this.enterAddList = this.enterAddList.bind(this);
    this.addList = this.addList.bind(this);
    this.delItem = this.delItem.bind(this);
    // 订阅模式-将store中数据的改变同步到组件
    this.changeInputValue = this.changeInputValue.bind(this);
    store.subscribe(this.storeChange);
  }
  render() {
    return (
      <TodoListUI
        inputValue={this.state.inputValue}
        inputFocus={this.inputFocus}
        changeInputValue={this.changeInputValue}
        enterAddList={this.enterAddList}
        addList={this.addList}
        list={this.state.list}
        delItem={this.delItem}
      />
    );
  }
  storeChange() {
    this.setState(store.getState());
  }
  changeInputValue(e) {
    const action = changeInputAction(e.target.value);
    store.dispatch(action);
  }
  inputFocus() {
    const action = inputFocusAction();
    store.dispatch(action);
  }
  enterAddList(e) {
    if (e.keyCode === 13) {
      this.addList();
    }
  }
  addList() {
    const action = addListAction();
    store.dispatch(action);
  }
  delItem(index) {
    const action = delItemAction(index);
    store.dispatch(action);
  }
}
export default TodoList;