Javascript 将数据库状态与运行时添加的数据合并_Javascript_Reactjs_Redux

Javascript 将数据库状态与运行时添加的数据合并

javascript reactjs redux

Javascript 将数据库状态与运行时添加的数据合并,javascript,reactjs,redux,Javascript,Reactjs,Redux,我在React/Redux中编写了一个带有数据库交互的小ToDo list应用程序，以了解这些技术的工作原理当前状态：在componentDidMount（）上，我调度和Ajax调用并在列表中显示数据库中的项目。用户可以将新项目添加到数据库中，但我无法将其附加到现有的呈现列表中。这是我的密码呈现列表的我的子组件： import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux

我在React/Redux中编写了一个带有数据库交互的小ToDo list应用程序，以了解这些技术的工作原理

当前状态：

在componentDidMount（）上，我调度和Ajax调用并在列表中显示数据库中的项目。用户可以将新项目添加到数据库中，但我无法将其附加到现有的呈现列表中。这是我的密码

呈现列表的我的子组件：

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


 export default class TodoList extends Component {

  render() {
  const posts = this.props.todos
  console.log(this.props.items)
  const items = this.props.items
  const isEmpty = posts.length === 0
   return (

    <div>
        <h3>Meine Aufgaben</h3>
        <ul>
           { this.props.items.items && this.props.items.items.length &&
                this.props.items.items.map((item, i) => <li key={i}>{item}</li>)}</li>)}
        </ul>
        <ul>

            {isEmpty
                ? <h3>Sie haben noch keinen Todo´s angelegt</h3>
                : <h3>Ihre Ergebnisse</h3>
            }
            {this.props.todos.map((todo, i) => <li key={i}>{todo.text}</li>)}
        </ul>
    </div>
    )
   }
  }
  const mapStateToProp = state => ({todos: state.addItem, items: state.getItem})

export default connect (mapStateToProp)(TodoList)

这个代码有效。但是现在我想让用户能够向列表中添加新项目。将项目添加到数据库的代码也可以工作，但我不知道如何将新项目附加到exist列表，因为我已将它们保存在不同的状态。但是我怎样才能合并呢

添加项目的操作包括：

let nextTodoId = 0

export default function addItem(item){
console.log("test")
return (dispatch, getState) => {
    return dispatch (postItem(dispatch, item))
   } 
 }

function postItem(dispatch, item){
return dispatch => {
    $.ajax({
        method: "POST",
        url: "http://localhost:444/localWebServices/addTask.php",
        data: {text: item}
    }).success(function(data){
        console.log("SUCCESS")
        dispatch(receiveAdd(item))
    });
   }
 }

function receiveAdd(item){
console.log("receive add")
return {
    type: 'ADD_ITEM',
    id: nextTodoId++,
    item
   }
 }

和减速器：

 export default (state = [], action) => {
 switch (action.type){
     case 'ADD_ITEM':
        //return action.item
        return [
            ...state,
            {
                id: action.id,
                text: action.item
            }
        ]
    default:
        return state

   }
}

我目前已经排除了显示子组件中新项目的列表，无论如何，这与这个问题无关

因此，如何将新添加的项附加到现有的初始状态，并将其附加到子组件中的呈现列表中

任何帮助都可以救我一天：）

UPADTE：

商店：

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import rootReducer from '../reducers/index'

export default function configureStore(preloadedState) {
const store = createStore(
    rootReducer,
    preloadedState,
    applyMiddleware(thunkMiddleware, createLogger())
)

if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
        const nextRootReducer = require('../reducers').default
        store.replaceReducer(nextRootReducer)
})
}

return store
}

还有我的索引减速机

import {combineReducers} from 'redux'
import addItem from './addItem'
import getItem from './getItem'
import todos from './todos'

const rootReducer = combineReducers({
  addItem,
  getItem
})

export default rootReducer

这是我的容器组件，其中调度addItem函数：

import React, { Component, PropTypes } from 'react'
import AddTodo from '../components/AddTodo'
import TodoList from '../components/TodoList'
import { connect } from 'react-redux'
import addItem from '../actions/addItem'
import getItems from '../actions/getItems'

class App extends Component {
constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.state = {text: ''}
}

handleClick(e){
    console.log(e);
    const {dispatch} = this.props
    dispatch(addItem(e));
}

componentDidMount(){
    console.log("COMPONENT MOUNT");
    const {dispatch} = this.props
    dispatch(getItems())
}

componentWillReceiveProps(nextProps) {
    console.log("GETTT IT");
    console.log(nextProps)
}

render() {

    return (
        <div>
        < h1 > Hallo </h1>
            <AddTodo handleAddItem={this.handleClick}/>
            <TodoList/>
        </div>
    )
   }
 }

App.propTypes = {
 dispatch: PropTypes.func.isRequired
}

function mapStateToProps(state){
 return {
    AddTodo,
    TodoList
 }
}

export default connect (mapStateToProps)(App)

import React，{Component，PropTypes}来自“React”
从“../components/AddTodo”导入AddTodo
从“../components/TodoList”导入TodoList
从“react redux”导入{connect}
从“../actions/addItem”导入addItem
从“../actions/getItems”导入getItems
类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.handleClick=this.handleClick.bind（this）
this.state={text:'}
}
handleClick（e）{
控制台日志（e）；
const{dispatch}=this.props
派遣（增补（e））；
}
componentDidMount（）{
控制台日志（“组件安装”）；
const{dispatch}=this.props
调度（getItems（））
}
组件将接收道具（下一步）{
log（“gett IT”）；
console.log（nextrops）
}
render（）{
返回(
你好

实际上不需要使用组合减速机。只需将两个减速机合并为一个减速机，如下所示：
export default (state = { items: [] }, action) => {
switch (action.type){
    case 'RECEIVE_POSTS':
        console.log(action.items)
        return Object.assign({}, state, {
            items: action.items
        });
    case 'ADD_ITEM':
        return Object.assign({}, state, {
            items: [
                ...items,
                action.item
            ]
        });
    default:
        return state
    }
}

这样，您就有了一个todo项数组。如果您删除了combinereducer
-state=>（{todos:state.addItem，items:state.getItem}）
将只是state=>（items:state.items}），请不要忘记更改connect
调用
实际上不需要使用组合减速机。只需将两个减速机合并为一个减速机，如下所示：
export default (state = { items: [] }, action) => {
switch (action.type){
    case 'RECEIVE_POSTS':
        console.log(action.items)
        return Object.assign({}, state, {
            items: action.items
        });
    case 'ADD_ITEM':
        return Object.assign({}, state, {
            items: [
                ...items,
                action.item
            ]
        });
    default:
        return state
    }
}

这样，您就有了一个todo项数组。如果您删除了combinereducer
-state=>（{todos:state.addItem，items:state.getItem}）
将只是state=>（items:state.items}），请不要忘记更改connect
调用
是否localWebServices/addTask.php
响应是一个项目数组，还是单个添加的项目？因为您将其视为reducer中的一个数组，这可能是一个错误。此外，您使用连接和状态。addItem
我猜这是添加项目
reducer的结果，但您将this.props.todos
作为一个数组，它实际上是一个包含items
字段的对象，该字段可能是一个数组。我更新了我的ADD_ITEM代码，因为我发布了一些错误的代码。目前addTask.php不返回任何内容，但将来它应该返回创建的ID。好的，现在看起来好多了，请添加你的属性r配置？Reducer看起来也不错。我们最终会得到它的！您能告诉我您在哪里调用addItem（item）
函数吗？我看到您使用了redux记录器
中间件。它将帮助您确定问题是在您的redux登录（操作/Reducer等）中还是在表示层上（指反应组件）。请检查开发人员工具，以确保操作按预期进行调度，并且状态已更新。php
localWebServices/addTask.php
response是一个项目数组，还是一个添加的项目？因为您在reducer中将其视为数组，这可能是一个错误。此外，您使用的是connectstate.addItem
进行de>，我猜这是ADD\u ITEM
reducer的结果，但您将this.props.todos
视为一个数组，它实际上是一个包含items
字段的对象，该字段可能是一个数组。我已经更新了ADD\u ITEM代码，因为我发布了一些错误的代码。目前addTask.php确实是一个数组什么也不转，但将来它会返回创建的ID。好的，现在看起来好多了，你能添加你的reducer配置吗？reducer看起来也不错。我们最终会得到它！你能告诉我你在哪里调用addItem（项目）吗
功能？我看到您使用了redux logger中间件。它将帮助您确定问题是在您的redux登录（操作/还原程序等）还是在表示层（指react组件）上。请检查您的开发人员工具，以确保操作按预期调度，并且状态已更新？嗯，当前它不工作。我已排除CombineReader。在我的存储中，我已包含包含包含您答案中代码的文件，并将其导入到我的CreateStore函数中。然后在我的渲染组件中，我已包含新状态（connect）。但这会导致“无法读取未定义的属性'items'”。我们必须找出异常发生的位置。您是否能够使用更新的代码创建一个或一些内容？我不希望在本地计算机上设置环境。请您尝试找出“无法读取属性…”的位置异常来自？你会加入聊天吗？嗯，目前它不工作。我已经排除了CombineReader
export default (state = { items: [] }, action) => {
switch (action.type){
    case 'RECEIVE_POSTS':
        console.log(action.items)
        return Object.assign({}, state, {
            items: action.items
        });
    case 'ADD_ITEM':
        return Object.assign({}, state, {
            items: [
                ...items,
                action.item
            ]
        });
    default:
        return state
    }
}