reduxを使用してToDoリストにToDoリストを追加する方法

Question

私のアプリケーションにactionとreducersを作成しました。私は新しいTo Doを作成しようとしていて、reduxを使ってそれを状態に保存したい。

アクション/ index.js/index.js

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

const todoApp = combineReducers({ todo }); 

export default todoApp; 

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; 

減速

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(); 

todos.js

let taskID = 0; 

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

減速/私はhandleCreateNote関数内で新しいTODOを保存したい

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; 

は、私は、ストアを使用する方法がわからない状態で保存するためにここに派遣します。誰でも助けてくれますか？

Answer 1

変更

export default App;

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

するには、以下のように、これらすべては、あなたのこの機能を変更した後

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

を使用して、すべてのアクションをインポートする必要があります： -

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(); 
    }; 

また、todosを追加するロジックが間違っています。 だからあなたのアクションの作成者がこの

let taskID = 0; 

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

のようなものでなければなりません今ではこのようなものでなければなりませんので、減速も、変更する必要があります： -

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; 

私は、これが最良のをhelps.Not願っていますあなたの問題を解決します。