react结合 antd redux的简单使用

// 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:'250px', 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>
    )
  }
}

// store/index文件  如果你要使用中间件，就必须在redux中引入applyMiddleware
import { createStore, applyMiddleware, compose   } from 'redux';
// import thunk from 'redux-thunk'
import reducer from './reducer'    
import mySaga from './mySaga'
import createSagaMiddleware from 'redux-saga'   //引入saga
const sagaMiddleware = createSagaMiddleware();   //创建saga中间件

// 使用Chrome浏览器安装插件，在浏览器右上角有三个点，然后点击"更多工具",再点击"扩展程序"，再点击右侧的"打开Chrome网上商店",然后搜索Redux DevTools 直接安装;(FQ工具)
// 配置Redux Dev Tools插件 控制台调试仓库数据
// const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
// redux-thunk 要和 Redux Dev Tools插件一并使用了，需要使用增强函数。使用增加函数前需要先引入compose
// Redux的中间件  redux-thunk Redux-saga
const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose

// const enhancer = composeEnhancers(applyMiddleware(thunk)) // 如果你想用 redux-thunk

const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware)) // 如果你想用 redux-saga

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

// then run the saga
sagaMiddleware.run(mySaga)

export default store

// 官方写法
// const store = createStore(
//   reducer,
//   applyMiddleware(thunk)
// ) 

// 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
}

 

__EOF__

本文作者：蓝色帅-橙子哥
本文链接：https://www.cnblogs.com/lhl66/p/12736057.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！