react创建项目学习基础语法redux的简单应用（三）

1.npm install --save redux （安装）

2.在src下面新建store文件夹，文件夹下面新建index.js文件、reducer.js文件

// store/index文件
import { createStore } from 'redux';
import reducer from './reducer'    

// 使用Chrome浏览器安装插件，在浏览器右上角有三个点，然后点击"更多工具",再点击"扩展程序"，再点击右侧的"打开Chrome网上商店",然后搜索Redux DevTools 直接安装;(翻墙工具)
// 配置Redux Dev Tools插件 控制台调试仓库数据
// const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

const store = createStore(reducer) // 创建数据存储仓库

export default store

// store/reducer.js 文件 默认数据 Reducer里只能接收state，不能改变state
const initState = {
  testList:[
    'vue',
    'react'
  ],
  inputValue: '请输入内容',
  name: 'redux'
}  
// state: 指的是原始仓库里的状态。
// action: 指的是action新传递的状态
// Reducer里编写业务逻辑
export default (state = initState, action) => {  //就是一个方法函数
  console.log(state,'redux-state',action,'redux-action')
  if (action.type === 'changeInput') {
    let newState = JSON.parse(JSON.stringify(state)) // 深度拷贝state
    newState.inputValue = action.value
    return newState
  }
  //根据type值，编写业务逻辑
  if (action.type === 'addItem' ) { 
    let nState = JSON.parse(JSON.stringify(state)) // 新增
    console.log(nState,'nState')
    nState.testList.push(nState.inputValue);
    // nState.inputValue = '';
    return nState
  }
  if (action.type === 'deleteItem' ) { 
    let newState = JSON.parse(JSON.stringify(state)) 
    newState.testList.splice(action.index,1)  //删除
    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={{ '200px', marginRight:'10px'}}
          onChange={this.changeValue}
        />
        <Button type="primary" onClick={this.addItem}>添加条目</Button>
        <div style={{margin:'10px','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)
  }