Simple applications (C) react to create a project of learning basic grammar redux

1.npm install --save redux (installation)

2. The following new store in the src folder, create a new folder below index.js file, reducer.js file

// Store / index file 
Import} {createstore from 'Redux' ; 
Import from the reducer './reducer'     // using the Chrome browser plug-in installed, there are three points in the upper right corner of your browser, then click on the "More Tools" and then click the "extension", then click to the right of "open the Chrome web store", then search Redux DevTools installed directly; (circumvention tools) 
// configuration Redux Dev tools plug-in debugging console data warehouse 
// const = createstore store (the reducer , window && window .__ .__ REDUX_DEVTOOLS_EXTENSION__ REDUX_DEVTOOLS_EXTENSION __ ()) 
const store = createstore (the reducer) // create a data repository 
Export default store

// Store / Reducer reducer.js file in the default data can only receive state, can not change the State 
const InitState = { 
  testlist: [
     'VUE' ,
     'REACT' 
  ], 
  for inputValue: 'Please enter your' , 
  name: 'Redux' 
}   
// state: refers to the original warehouse status. 
// action: action refers to a new transmission state 
// the Reducer in writing business logic 
Export default (State = InitState, action) => {   // is a method function 
  console.log (state, 'redux-state ', action , 'Redux-Action' )
   IF (action.type === 'changeInput' ) { 
    the let newState The = the JSON.parse (the JSON.// deep copy State 
    newState.inputValue = action.value
     return newState The 
  } 
  // The type value, write the business logic 
  IF (action.type === 'the addItem' ) { 
    the let nState = the JSON.parse (the JSON.stringify (State) ) // Add 
    the console.log (nState, 'nState' ) 
    nState.testList.push (nState.inputValue); 
    // nState.inputValue = ''; 
    return nState 
  } 
  IF (action.type === 'the deleteItem' ) { 
    the let newState The = the JSON.parse (the JSON.stringify (State)) 
    newState.testList.splice (action.index, . 1)  // delete 
    return newState 
  } 
  return State 
}

// AntdTest 测试 redux 组件
// 在src/index.js文件中 import 'antd/dist/antd.css' 安装 antd 的命令 npm install antd --save
import React, { Component } from 'react'
import { Button, Pagination, List, Input    } from 'antd';
import store from '../store'

export default class AntdTest extends Component {
  constructor(props) {
    super(props)
    console.log(store, 'store')
    this.state = store.getState();
    store.subscribe(this.storeChange) // 订阅 Redux的状态---> 解决store里的数据已经更新了，但是组件还没有进行更新
    console.log(this.state)
  }
  // 输入框 change 事件
  changeValue = e => {
    // console.log(e.target.value);
    const action = {
      type:'changeInput',
      value:e.target.value
    }
    store.dispatch(action)
  }
  // 更新store
  storeChange = () => {
    this.setState(store.getState())
  }
  // 添加条目功能
  addItem = () => {
    const action = { type:'addItem'}
    store.dispatch(action)
  }
  // 删除条目功能
  deleteItem = (index) => {
    console.log(this,'this')
    const action = {
      type:'deleteItem',
      index
    }
    store.dispatch(action)
  }
  // 渲染函数
  render() {
    return (
      <div className="antd-box">
        <div>store里面的数据name:{this.state.name}</div>
        <Input 
          placeholder='请添加' 
          style={{ width:'200px', marginRight:'10px'}}
          onChange={this.changeValue}
        />
        <Button type="primary" onClick={this.addItem}>添加条目</Button>
        <div style={{margin:'10px',width:'300px'}}>
          <List
            bordered
            dataSource={this.state.testList}
            renderItem={(item, index)=>(<List.Item onClick={(index) => this.deleteItem(index)}>{item}</List.Item>)}
          />    
        </div>
        <Pagination defaultCurrent={1} total={50} />
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="link">Link</Button>
      </div>
    )
  }
}

3.一般的还会在store下面新建一个actionType.js内容如下 需要用到的组件直接 import { CHANGE_INPUT , ADD_ITEM , DELETE_ITEM } from './store/actionTypes' 方便集中管理

export const  CHANGE_INPUT = 'changeInput'
export const  ADD_ITEM = 'addItem'
export const  DELETE_ITEM = 'deleteItem'

4.进一步在拆解出来常用的功能

import {CHANGE_INPUT , ADD_ITEM,DELETE_ITEM}  from './actionTypes'

export const changeInputAction = (value)=>({
    type:CHANGE_INPUT,
    value
})

export const addItemAction = ()=>({
    type:ADD_ITEM
})

export const deleteItemAction = (index)=>({
    type:DELETE_ITEM,
    index
})
-------------------------------------------------------------------
// 使用方式 
 // 输入框 change 事件
 changeValue = e => {
  // console.log(e.target.value);
  const action = changeInputAction(e.target.value)
  store.dispatch(action)
}
  // 添加条目功能
  addItem = () => {
    const action = addItemAction()
    store.dispatch(action)
  }
  // 删除条目功能
  deleteItem = (index) => {
    console.log(this,'this')
    const action = deleteItemAction(index)
    store.dispatch(action)
  }