Javascript 理解Redux和State

我修了两门课，treehouse和udemy上的一门课，react/redux上的一门课，就在我对自己说“嘿，你明白了，让我们做一点练习”的时候，我遇到了一些我似乎无法诊断的巨大错误

我在这里尝试做的事情听起来非常简单，在纯javascript中也可以。我的状态是一个空对象

state={}

，当调用我的操作时，它会在state

noteName

内创建一个数组。因此，在一天结束时，状态应该像

state={noteName:[…state.noteName，action.payload]}

当I

console.log（this.props.inputvalue）

时，它将返回

input

元素中的任何内容。我认为我理解对象，因为consolelog应该返回数组

noteName

，而不是实际值，对吗

代码 操作/index.js

export const INPUT_VALUE = 'INPUT_VALUE';

export function addNoteAction(text) {
  return {
    type: INPUT_VALUE,
    payload: text
  }
}

import { INPUT_VALUE } from '../actions';

// state is initialized as an empty object here
export default function(state = {}, action) {
  switch (action.type) {
    case INPUT_VALUE:
      state.noteName = [];
      // this SHOULD create an array that concats action.payload with
      // whatever is already inside of state.name
      return state.noteName = [...state.noteName, action.payload];
    default:
      return state;
  }
}

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

class NoteItems extends Component {
  render() {
    return (
      <ul>
        { 
          this.props.inputvalue.noteName 
          ?
          this.props.inputvalue.noteName.map((note, index) => {
            // this should iterate through noteName but returns undefined
            return <li key={index}>{note}</li>;
          }) 
          :
          <li>Nothing here</li>
        }
      </ul>
    );
  }
}

function mapStateToProps(state) {
  return {
    inputvalue: state.inputvalue
  }
}

export default connect(mapStateToProps)(NoteItems);

减速机/reducer\u inputvalue.js

export const INPUT_VALUE = 'INPUT_VALUE';

export function addNoteAction(text) {
  return {
    type: INPUT_VALUE,
    payload: text
  }
}

import { INPUT_VALUE } from '../actions';

// state is initialized as an empty object here
export default function(state = {}, action) {
  switch (action.type) {
    case INPUT_VALUE:
      state.noteName = [];
      // this SHOULD create an array that concats action.payload with
      // whatever is already inside of state.name
      return state.noteName = [...state.noteName, action.payload];
    default:
      return state;
  }
}

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

class NoteItems extends Component {
  render() {
    return (
      <ul>
        { 
          this.props.inputvalue.noteName 
          ?
          this.props.inputvalue.noteName.map((note, index) => {
            // this should iterate through noteName but returns undefined
            return <li key={index}>{note}</li>;
          }) 
          :
          <li>Nothing here</li>
        }
      </ul>
    );
  }
}

function mapStateToProps(state) {
  return {
    inputvalue: state.inputvalue
  }
}

export default connect(mapStateToProps)(NoteItems);

noteems.js

export const INPUT_VALUE = 'INPUT_VALUE';

export function addNoteAction(text) {
  return {
    type: INPUT_VALUE,
    payload: text
  }
}

import { INPUT_VALUE } from '../actions';

// state is initialized as an empty object here
export default function(state = {}, action) {
  switch (action.type) {
    case INPUT_VALUE:
      state.noteName = [];
      // this SHOULD create an array that concats action.payload with
      // whatever is already inside of state.name
      return state.noteName = [...state.noteName, action.payload];
    default:
      return state;
  }
}

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

class NoteItems extends Component {
  render() {
    return (
      <ul>
        { 
          this.props.inputvalue.noteName 
          ?
          this.props.inputvalue.noteName.map((note, index) => {
            // this should iterate through noteName but returns undefined
            return <li key={index}>{note}</li>;
          }) 
          :
          <li>Nothing here</li>
        }
      </ul>
    );
  }
}

function mapStateToProps(state) {
  return {
    inputvalue: state.inputvalue
  }
}

export default connect(mapStateToProps)(NoteItems);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
类NoteItems扩展组件{
render（）{
返回(

{ 
this.props.inputvalue.noteName
?
this.props.inputvalue.noteName.map（（注释，索引）=>{
//这应该遍历noteName，但返回未定义的
返回
{note}
；
}) 
:
这里什么都没有
}

);
}
}
函数MapStateTops（状态）{
返回{
inputvalue:state.inputvalue
}
}
导出默认连接（MapStateTops）（注释项）；

您正在覆盖交换机外壳第一行的

状态。noteName

switch (action.type) {
  case INPUT_VALUE:
    state.noteName = [];

在Redux中，重点是永远不要覆盖值，而是返回一个新值，该值可能是全新的值，可能是基于旧值的值（但仍然是新值…不覆盖旧值），或者可能是返回旧值（完全未修改）

---

在该示例中，我从未修改

计数器上的值。所有内容都被视为只读。
之所以会发生这种情况，是因为每次调度操作
输入值时，您都在重置
noteName
。redux的主要原则是不修改状态，而是基于当前状态创建一个新状态。就你而言：

const initialState = {
  noteName: []
};

export default function(state = initialState, action) {
  switch (action.type) {
    case INPUT_VALUE: return { 
      noteName: [...state.noteName, action.payload] 
    };

    default: return state;
  }
}

你例子的第二行有一个打字错误。更正该错误并从
noteName:[…this.state.noteName，action.payload]中的return语句中删除
this
后，它将按预期工作。我真的很感谢你。不知道在参数中使用initialState常量。