技術標籤：jsreactjavascript

文章目錄

• • • 一、建立專案，安裝依賴包
    • 二、Todos 案例

一、建立專案，安裝依賴包

npm install create-react-app -g  //安裝建立react專案的腳手架

create-react-app 專案名稱   //再利用腳手架 建立專案

或者不安裝腳手架，直接建立專案：

npx create-react-app my-react-app(專案名稱)  //先將 my-react-app 下載到本地，用完刪除

安裝 redux

npm install redux --save 
或
npm install --save redux react-redux
 

安裝Ant design

npm install antd --save

二、Todos 案例

1、在src資料夾下建立store倉庫，在倉庫下建立index.js 和 reducer.js 檔案如下圖：

2、在 store/index.js 檔案下，寫如下程式碼：

/* 1. 引入建立倉庫的函式 */
import { createStore } from 'redux'

/* 2. 引入 reducer */
import reducer from './reducer'

/* 3. 建立一個倉庫 */
const store = createStore(
    reducer,
    window.
 
__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() //配置Redux DevTools外掛
)
/* 4. 匯出整個倉庫 */
export default store  

3、在 store/reducer.js 檔案下，寫如下程式碼：

/* 單個 reducer */
/* 1、初始化資料 */
const defaultState = {
    inputValue: 'write something',
    list: [
        '今天吃雞腿飯',
        '明天吃炒麵筋'
 
,
        '後天吃串串香'
    ]
}
/* 
	 state 初始化狀態值
   action 這次操作型別和資料
 */
export default (state = defaultState, action) => {
    // console.log(state, action);
    if (action.type === 'changeInput') {
        //Reducer裡只能接收state，不能改變state
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    if (action.type === 'addItem') {
        //Reducer裡只能接受state，不能改變state
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if (action.type === 'deleItem') {
        //Reducer裡只能接受state，不能改變state
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(newState.inputValue, 1)
        return newState
    }
    return state
}

4、在 src/App.js 檔案下，寫如下程式碼：

import React, { Component } from 'react'
/* 引入Ant design樣式 */
import 'antd/dist/antd.css' // or 'antd/dist/antd.less'
import { Input, Button, List } from 'antd'
/* 1、引入 store */
import store from './store'

export default class App extends Component {
  constructor(props){
    super(props)
    this.state= store.getState();
    // this.changeInputValue = this.changeInputValue.bind(this)
    store.subscribe(this.storeChange)  //訂閱模式
  };
  changeInputValue = (e) => {
    // console.log(e.target.value)
    const action = {
      type: 'changeInput',
      value: e.target.value
    }
    store.dispatch(action)
  };

  storeChange = ()=>{
    this.setState(store.getState())
  };

  clickBtn = ()=>{
    const action = {
      type: 'addItem',
    }
    store.dispatch(action)
  };

  deleClick(index){
    const action = {
      type: 'deleItem',
      index
    }
    store.dispatch(action)
  }

  render() {
    return (
      <div>
        <div style={{margin: '15px'}}>
          <Input autoFocus value={this.state.inputValue}  style={ { width:'200px',marginRight:'5px' } } onChange={this.changeInputValue}/>
          <Button type="primary" onClick={this.clickBtn}> 增加 </Button>
        </div>

        <div style={{margin:'15px', width:'250px'}}>
          <List bordered dataSource={this.state.list} renderItem={(item,index) => (<List.Item onClick={this.deleClick.bind(this,index)}>{item}</List.Item>)}/>
        </div>
      </div>
      )
  };
};