React Redux 基础配置

目录

store

--index.js

--reducer.js

--actionTypes.js

--actionCreator.js 

-TodoList.js

-TodoItem.js

-index.js

---

store

--index.js

import { createStore } from 'redux';
import reducer from './reducer'
const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

export default store;

--reducer.js

import { INPUT_VALUE_CHANGE, LIST_ITEM_CHANGE, LIST_ITEM_DEL } from './actionTypes';

const defaultState = {
    inputValue: '',
    list: []
}
export default (state = defaultState, action) => {
    if(action.type === INPUT_VALUE_CHANGE){
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.value
        return newState;
    }
    if(action.type === LIST_ITEM_CHANGE){
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = '';
        newState.list.push(state.inputValue)
        return newState;
    }
    if(action.type === LIST_ITEM_DEL){
        const newState = state;
        newState.list.splice(action.value,1);
        return newState;
    }
    return state;
}

--actionTypes.js

export const INPUT_VALUE_CHANGE = 'input_value_change';
export const LIST_ITEM_CHANGE = 'list_item_change';
export const LIST_ITEM_DEL = 'list_item_del';

--actionCreator.js 

import { INPUT_VALUE_CHANGE, LIST_ITEM_CHANGE, LIST_ITEM_DEL } from './actionTypes';


export const inputValueChangeAction = (value) => ({
    type: INPUT_VALUE_CHANGE,
    value
});

export const listItemChangeAction = () => ({
    type: LIST_ITEM_CHANGE
});

export const listItemDelAction = (value) => ({
    type: LIST_ITEM_DEL,
    value
});

-TodoList.js

import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem';
import { Button, Input } from 'antd'
import store from './store';
import { inputValueChangeAction, listItemChangeAction } from './store/actionCreator';

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleAdd = this.handleAdd.bind(this);
    this.handleStoreChange = this.handleStoreChange.bind(this);
    store.subscribe(this.handleStoreChange);
  }

  render() {
    return (
      <Fragment>
        <div>
          <Input
            style={{ width: '300px' }}
            value={this.state.inputValue}
            placeholder="Input Something"
            onChange={this.handleInputChange}
          />
          <Button className="blue" onClick={this.handleAdd} type="primary">添加</Button>
        </div>
        <TodoItem/>
      </Fragment>
    )
  }

  handleInputChange(e) {
    const action = inputValueChangeAction(e.target.value);
    store.dispatch(action);
  }
  handleAdd() {
    if (this.state.inputValue === '') {
      alert('Please Input Something');
      return false;
    }
    const action = listItemChangeAction();
    store.dispatch(action);
  }
  handleStoreChange(){
    this.setState(store.getState());
  }
}
export default TodoList;

-TodoItem.js

import React, { Fragment, Component } from 'react';
import { List,Button } from 'antd';
import store from './store';
import { listItemDelAction } from './store/actionCreator';

class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleStoreChange = this.handleStoreChange.bind(this);
    store.subscribe(this.handleStoreChange);
  }
  shouldComponentUpdate() {
    return true;
  }
  render() {
    return (
      <Fragment>
        <List
          style={{width:"364px",marginTop:"20px"}}
          bordered
          dataSource={this.state.list}
          renderItem={(item,index) => (
            <List.Item>
            <span style={{padding:"5px"}}>{item}</span>
            <Button type="danger" onClick={this.handleDel.bind(this,index)}>删除</Button>
            </List.Item>
          )}
        />
      </Fragment>
    )
  }
  handleStoreChange(){
    this.setState(store.getState());
  }
  handleDel(index) {
    const action = listItemDelAction(index);
    store.dispatch(action);
  }
}

export default TodoItem;

-index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import 'antd/dist/antd.css';
import './common.css';


ReactDOM.render(<TodoList />, document.getElementById('root'));