使用react-redux實作一個todolist小案例

首先我們得對redux有一定的基礎認識。

入口檔案

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'

import TodoList from './TodoList'
import store from './store/index'

ReactDOM.render(

  <Provider store={store}>
    <TodoList/>
</Provider>
,
  document.getElementById('root')
);


           

1、Store核心檔案（store.js）

store就是儲存資料的地方，可以把它看成一個容器，整個應用隻能有一個store。

Redux 提供

createStore

這個函數，用來生成 Store

代碼塊：

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'

import reducers from './reducer'
const store = createStore(reducers,composeWithDevTools(applyMiddleware(thunk)) )

export default store
           

我把actions檔案中的type抽離出來寫成了一個新的檔案

action-types.js

，用常量來定義type防止出錯。

2、action-types檔案

export const CHANGE_INPUTVALUE = 'change_input' //修改input框值
export const DELETE_ITEM = 'delete_item' //删除
export const ADD_ITEM = 'add_item' //添加
           

3、action檔案 (actions.js)

state的變化就會導緻頁面視圖view的改變。但是，使用者接觸不到vstate，隻能接觸到view。 是以state的改變必須是view導緻的，action就是view發出的通知，表示state要發生變化了。

代碼：

import {
    CHANGE_INPUTVALUE,
    DELETE_ITEM,
    ADD_ITEM
} from './action-types'


// export const inputChange = (e) => ({ type: CHANGE_INPUTVALUE, value: e.target.value })
//定義同步action
export const inputChange = (e) => dispatch => {
    dispatch({ type: CHANGE_INPUTVALUE, value: e.target.value})    
}
export const clickButton = () => ({ type: ADD_ITEM })
export const deleteItem = (index)=>({ type: DELETE_ITEM,index})
           

4、reducer檔案

reducer是一個純函數。它接受action和目前state作為參數，傳回一個新的state。

代碼：

// reducer裡隻能接受state，不能改變state
import {combineReducers} from 'redux'

import {
    CHANGE_INPUTVALUE,
    DELETE_ITEM,
    ADD_ITEM
} from './action-types'
const defaultState = {
    inputValue: 'write something',
    list:
    [
        '金泰亨',
        '樸智旻',
        '金南俊'
    ]
}

// 産生list狀态的reducer
function list (state = defaultState, action){
    if (action.type === CHANGE_INPUTVALUE) {
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    if (action.type === ADD_ITEM) {
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if (action.type ===  DELETE_ITEM) {
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index, 1)
        return newState
    }
    return state
}


//向外暴露狀态的結構
export default combineReducers ({
   list
})

           

5、父元件TodoList.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

import TodoListUI from './TodoListUI'
import {inputChange,clickButton,deleteItem} from './store/actions'


 class TodoList extends Component {
    changeInputValue = (e) => {
        // console.log(e.target.value);
      this.props.inputChange(e)
    }
    
    clickBtn = () => {
        this.props.clickButton()
    }

    deleteItem = (index) => {
        this.props.deleteItem(index)
    }


    render() {
        return (
            <TodoListUI
                inputValue = {this.props.list.inputValue}
                changeInputValue={this.changeInputValue}
                clickBtn={this.clickBtn}
                list={this.props.list.list}
                deleteItem = {this.deleteItem}
          />
        )
    }
}


export default connect(
    state =>({list:state.list}),
    {inputChange,clickButton,deleteItem}
)(TodoList)
           

6、UI元件TodoListUI.js

import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd'

class TodoListUI extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (
            <div style={{margin:'10px'}}>
            <div >
                <Input
                    placeholder={this.props.inputValue}
                    style={{ width: '250px', marginRight: '10px' }}
                    onChange={this.props.changeInputValue}
                />
                <Button type='primary' onClick={this.props.clickBtn}>增加</Button>
            </div>

            <div style={{margin:'10px', width:'300px'}}>
                <List
                    bordered
                    dataSource={this.props.list}
                        renderItem={(item, index) => (
                            <List.Item
                                onClick={() => { this.props.deleteItem(index) }}>
                                {item}
                            </List.Item>
                        )}
                />
            </div>
        </div>
         );
    }
}
 
export default TodoListUI;
           

至此，一個完整的todolist小案例就實作了。