REDX存儲區中的重複嵌套對象

Question

爲什麼我的REDX存儲區中存在重複嵌套的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的鑰匙，這就是您看到重複的原因。