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 }