Redux Todolist 应用开发实例

Redux 是一种状态管理的库，能够帮助我们高效地管理应用程序中的数据。接下来，我们将从简单的 Redux 基础开始，逐步构建一个 Todolist 应用。

入口文件：TodoList.js

入口文件通常是应用程序的起点，以下是我们的 TodoList 组件：

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) => {    this.props.inputChange(e);  };  clickBtn = () => {    this.props.clickButton();  };  deleteItem = (index) => {    this.props.deleteItem(index);  };  render() {    return (      
       );  }}export default connect(  state => ({ list: state.list }),  { inputChange, clickButton, deleteItem })(TodoList);

Redux 核心配置：store.js

Redux 的核心是 Store。通过 createStore 函数创建一个 Redux 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;

Action 类型定义：action-types.js

为了避免硬编码，我们将所有动作类型抽离到一个独立的文件中：

export const CHANGE_INPUTVALUE = 'change_input';export const DELETE_ITEM = 'delete_item';export const ADD_ITEM = 'add_item';

Action 实现：actions.js

定义与状态交互的动作：

import { CHANGE_INPUTVALUE, DELETE_ITEM, ADD_ITEM } from './action-types';export const inputChange = (e) => ({  type: CHANGE_INPUTVALUE,  value: e.target.value});export const clickButton = () => ({  type: ADD_ITEM});export const deleteItem = (index) => ({  type: DELETE_ITEM,  index});

Redux 纯函数：reducer.js

Redux 的另一个核心是 Reducer。它是一个纯函数，接受当前状态和动作，返回新的状态：

import { combineReducers } from 'redux';import { CHANGE_INPUTVALUE, DELETE_ITEM, ADD_ITEM } from './action-types';const defaultState = {  inputValue: '写 something',  list: ['金泰亨', '朴智旻', '金南俊']};function list(state = defaultState, action) {  if (action.type === CHANGE_INPUTVALUE) {    const newState = { ...state };    newState.inputValue = action.value;    return newState;  }  if (action.type === ADD_ITEM) {    const newState = { ...state };    newState.list.push(newState.inputValue);    newState.inputValue = '';    return newState;  }  if (action.type === DELETE_ITEM) {    const newState = { ...state };    newState.list.splice(action.index, 1);    return newState;  }  return state;}export default combineReducers({  list: list});

UI 组件：TodoListUI.js

最后，UI 组件负责显示实际的 TodoList 界面：

import React, { Component } from 'react';import 'antd/dist/antd.css';import { Input, Button, List } from 'antd';import { ToString } from 'react-redux'; // ROI: 注意此处class TodoListUI extends Component {  render() {    const { inputavigateValue, list, changeInputValue, clickBtn, deleteItem } = this.props;    return (      
           
              
               
             
    
        
              
     
       (              
      
        deleteItem(index)}                key={index}              >                {item}              
                  )}          />        
     
    
      
   
    );  }}export default TodoListUI;

通过以上配置，我们已经完成了一个完整的 Todolist 应用。用这个案例可以快速掌握 Redux 的基本使用方法，同时也了解如何通过组合多个 Redux 库来构建复杂的状态管理方案。

转载地址：http://fuitz.baihongyu.com/

你可能感兴趣的文章