レビュックスストアに重複したネストされたオブジェクト

Question

なぜ私のレビュックスストアに重複したネストされたtodosオブジェクトがありますか？

コンポーネント/ todoInput.js

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 

import actions from '../../actions'; 

class TodoInput extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     inputText: '' 
    }; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleChange(e) { 
    this.setState({ 
     inputText: e.target.value 
    }); 
    } 

    handleClick(e) { 
    e.preventDefault(); 

    this.props.dispatch(actions.addTodo(this.state.inputText)); 
    } 

    render() { 
    return (
     <div> 
     <input 
      type="text" 
      placeholder="todo" 
      value={this.state.inputText} 
      onChange={this.handleChange} 
      /> 
     <button onClick={this.handleClick}>Sumbit</button> 
     </div> 
    ); 
    } 
} 

TodoInput.propTypes = { 
    dispatch: PropTypes.func, 
}; 

export default TodoInput; 

リデューサー/ todo.js

import { ADD_TODO } from '../constants/actionTypes'; 

function getId(state) { 
    return state.todos.reduce((maxId, todo) => { 
    return Math.max(todo.id, maxId); 
    }, -1) + 1; 
} 

const initialState = { 
    todos: [{ 
    id: 0, 
    text: 'Initial Todo', 
    completed: false 
    }] 
}; 

export default function todos(state = initialState, action) { 

    switch (action.type) { 

    case ADD_TODO: 
     return { 
     ...state, 
     todos: [{ 
      text: action.text, 
      completed: false, 
      id: getId(state) 
     }, ...state.todos] 
     }; 

    default: 
     return state; 
    } 
} 

Answer 1

あなたは入れ子構造を自分で提供してきました。ドスの減速は、状態オブジェクトでtodosキーを作成し、あなたが初期値に提供しました：だから

todos: [{ 
    id: 0, 
    text: 'Initial Todo', 
    completed: false 
}] 

を、この減速によって作成された状態のスライスがある：

todos: { 
    todos: [{ ... }] 
} 

ジャスト宣言しますtodosキーを持つオブジェクトの代わりに配列としての初期状態。これはあなたの望むものだと思われます。

Answer 2

通常、レジューサーは店舗の支店に住んでいます。店舗の作り方によって決まります。 redux docsから例を使用して

：

import { combineReducers } from 'redux' 
import todos from './todos' 
import counter from './counter' 

export default combineReducers({ 
    todos, 
    counter 
}) 

これは、この構造でストアを作成します。

{ 
    todos: ..., 
    counter: ..., 
} 

何これらのブランチに行くことはあってはならない個々の減速によって決定されます店舗全体の構造を認識しています。

あなたのケースでは、レデューサーはtodosという別のキーを作成しています。そのため、複製が表示されます。