Dupliziertes verschachteltes Objekt in Redux speichern

Question

Warum ist ein doppelt verschachteltes todos Objekt in meinem Redux-Speicher?

Komponenten/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; 

Reduzierungen/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

Sie haben die verschachtelte Struktur selbst zur Verfügung gestellt. Die todos Minderer erzeugt einen todos Schlüssel in der Statusobjekt, und Sie haben einen Anfangswert von zur Verfügung gestellt:

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

So wird der Zustand Scheibe dieses Minderer erstellt ist:

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

Genau das erklären Anfangszustand als ein Array anstelle eines Objekts mit dem Schlüssel todos. Es klingt wie das, was du willst.

Answer 2

Reducers leben normalerweise in einer Filiale des Ladens, bestimmt durch die Art und Weise, wie Sie Ihr Geschäft erstellen.

Am Beispiel von den redux docs:

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

export default combineReducers({ 
    todos, 
    counter 
}) 

dies ein Geschäft mit dieser Struktur schaffen:

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

was in diesen Branchen geht, ist durch den individuellen Minderer entscheidet, die sollten nicht Kenntnis der Struktur des gesamten Ladens.

In Ihrem Fall erstellt Ihr Reducer einen anderen Schlüssel namens todos, weshalb Sie die Duplizierung sehen.