Wie man redux benutzt, um todo Artikel in Todo-Liste hinzuzufügen

Question

Ich habe action und reducers für meine Anwendung erstellt. Ich versuche, einen neuen Todo zu erstellen und möchte ihn im Zustand redux speichern.

action/index.js

let taskID = 0; 

export const addTodo = text => { 
    return { type: "ADD_TODO", text, id: taskID++ }; 
}; 

Reduzierstücke/todos.js

const todo = (state = {}, action) => { 
    switch (action.type) { 
    case "ADD_TODO": 
     return { 
     id: action.id, 
     text: action.text, 
     status: false 
     }; 
    default: 
     return state; 
    } 
}; 

export default todo; 

Reduzierstücke/index.js

import { combineReducers } from "redux"; 
import todos from "./todos"; 

const todoApp = combineReducers({ todo }); 

export default todoApp; 

index.js

import React from "react"; 
import ReactDOM from "react-dom"; 
import App from "./App"; 
import registerServiceWorker from "./registerServiceWorker"; 
import "./index.css"; 

import { Provider } from "react-redux"; 
import { createStore } from "redux"; 
import todoApp from "./reducers/todos"; 

let store = createStore(todoApp); 

ReactDOM.render(
    <Provider store={store}><App /></Provider>, 
    document.getElementById("root") 
); 
registerServiceWorker(); 

App.js

import React, { Component } from "react"; 
import logo from "./logo.svg"; 
import "./App.css"; 

import AppBar from "material-ui/AppBar"; 
import FloatingActionButton from "material-ui/FloatingActionButton"; 
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"; 
import * as strings from "./Strings"; 
import * as colors from "./Colors"; 
import styles from "./Styles"; 
import ContentAdd from "material-ui/svg-icons/content/add"; 
import Dialog from "material-ui/Dialog"; 
import FlatButton from "material-ui/FlatButton"; 
import * as injectTapEventPlugin from "react-tap-event-plugin"; 
import TextField from "material-ui/TextField"; 
import { List, ListItem } from "material-ui/List"; 
import { connect } from "react"; 
import { addTodo } from "./actions/index"; 

const AppBarTest =() => 
    <AppBar 
    title={strings.app_name} 
    iconClassNameRight="muidocs-icon-navigation-expand-more" 
    style={{ backgroundColor: colors.blue_color }} 
    />; 

class App extends Component { 
    constructor(props) { 
    injectTapEventPlugin(); 
    super(props); 
    this.state = { 
     open: false, 
     todos: [], 
     notetext: "" 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleOpen =() => { 
    this.setState({ open: true }); 
    }; 

    handleClose =() => { 
    this.setState({ open: false }); 
    }; 

    handleCreateNote =() => { 
    let todos = [...this.state.todos]; 
    todos.push({ 
     id: todos.length, 
     text: this.state.notetext, 
     completed: false 
    }); 
    this.setState({ todos: todos },() => { 
     // setState is async, so this is callback 
    }); 
    this.handleClose(); 
    }; 

    handleChange(event) { 
    this.setState({ [event.target.name]: event.target.value }); 
    } 

    _renderTodos() { 
    return this.state.todos.map(event => { 
     return (
     <ListItem 
      primaryText={event.text} 
      key={event.id} 
      style={{ width: "100%", textAlign: "center" }} 
      onTouchTap={this._handleListItemClick.bind(this, event)} 
     /> 
    ); 
    }); 
    } 

    _handleListItemClick(item) { 
    console.log(item); 
    } 

    render() { 
    return (
     <MuiThemeProvider> 
     <div> 
      <AppBarTest /> 
      <FloatingActionButton 
      style={styles.fab} 
      backgroundColor={colors.blue_color} 
      onTouchTap={this.handleOpen} 
      > 
      <ContentAdd /> 
      </FloatingActionButton> 
      <Dialog 
      open={this.state.open} 
      onRequestClose={this.handleClose} 
      title={strings.dialog_create_note_title} 
      > 
      <TextField 
       name="notetext" 
       hintText="Note" 
       style={{ width: "48%", float: "left", height: 48 }} 
       defaultValue={this.state.noteVal} 
       onChange={this.handleChange} 
       onKeyPress={ev => { 
       if (ev.key === "Enter") { 
        this.handleCreateNote(); 
        ev.preventDefault(); 
       } 
       }} 
      /> 

      <div 
       style={{ 
       width: "4%", 
       height: "1", 
       float: "left", 
       visibility: "hidden" 
       }} 
      /> 

      <FlatButton 
       label={strings.create_note} 
       style={{ width: "48%", height: 48, float: "left" }} 
       onTouchTap={this.handleCreateNote} 
      /> 
      </Dialog> 

      <List style={{ margin: 8 }}> 
      {this._renderTodos()} 
      </List> 

     </div> 
     </MuiThemeProvider> 
    ); 
    } 
} 

export default App; 

ich neue Aufgabe innerhalb handleCreateNote Funktion speichern möchten, bin ich nicht sicher, wie Speicher zu verwenden, hier versenden sie im Zustand zu speichern. Kann mir jemand helfen ?

Answer 1

ändern

export default App; Um

function mapStateToProps(state) { 
    return { 
     todo: todo 
    } 
} 
export default connect(mapStateToProps, actions)(App) 

Sie sollten auch Ihre Verwendung dieser Funktion alle Aktionen importieren

import * as actions from './action/index'; 

Nach all diesen wie folgt ändern: -

handleCreateNote =() => { 
    let todos = [...this.state.todos]; 
    let newTodo = { 
     id: todos.length, 
     text: this.state.notetext, 
     completed: false 
    }; 
    todos.push(newTodo); 
    this.setState({ todos: todos },() => { 
     // setState is async, so this is callback 
    }); 
    this.props.addTodo(this.state.notetext); 
    this.handleClose(); 
    }; 

Auch Ihre Logik zum Hinzufügen von Todos ist falsch. So sollte Ihre Aktion Schöpfer so etwas wie dieses

let taskID = 0; 

export const addTodo = text => { 
    return { 
    type: "ADD_TODO", 
    text: text, 
    id: taskId++ 
    }; 
}; 

sein Nun ist die Reduzierung muss auch so ändern, dass so etwas wie dies sein sollte: -

const todo = (state = [], action) => { 
    switch (action.type) { 
    case "ADD_TODO": 
     let newTodo = { 
     id: action.id, 
     text: action.text, 
     status: false 
     }; 
     return [...state, newTodo] 
    default: 
     return state; 
    } 
}; 

export default todo; 

Ich hoffe, das helps.Not das Beste Implementierungen, aber wird Ihr Problem lösen.