使用React Redux的第一步需要帮助吗

我正在努力用Redux迈出第一步。所有这些“Todo应用程序”教程都很不错，“按钮增量”教程也不错。我想用我自己的例子来教自己Redux的逻辑，但有些东西不起作用。目前，我不确定状态来自何处，所以我尝试了许多不同的变体，让Redux“启动”，而不会出现初始化错误，我找到了一个有效的解决方案！首先，我刚刚在减速器中设置了状态，但是按钮描述没有出现。然后，我在store中另外设置了状态，至少按钮有decribtion test123和console.log。但是如何从reducer获取状态（我查看了文档，建议通过reducer传递状态，而不是通过存储本身）。目前，我得到以下错误：

Error: Objects are not valid as a React child (found: object with keys {0, 1, 2, 3}). If you meant to render a collection of children, use an array instead.

下面是我的绝对基本的代码，可以帮助我理解redux的逻辑：

动作类型：

export const CLICK = 'CLICK'

操作创建者：

import { CLICK } from './types';

export function clicked() {
    return({
        type: CLICK,
        payload: 'switch the describtion of the button'
    })
}

clickReducer：

import { CLICK } from '../actions/types';

const initialState = {
    name: 'test'
}

export default function (state = initialState, action) {
    console.log('click-test', action)
    switch(action.type) {
        case CLICK: {
            return Object.assign({}, state)
        }
        default:
        return state
    }
}

rootReducer：

import { combineReducers } from 'redux';
import clickReducer from './clickReducer';

export default combineReducers({
    name: clickReducer
})

商店：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {
    name: 'test123' 
};

const middleWare = [thunk];

const store = createStore(rootReducer, initialState, applyMiddleware(...middleWare));

export default store;

和按钮组件：

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { clicked } from '../actions/clickAction';

class Button extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.clicked}>{this.props.name}</button>
      </div>
    )
  }
}

const mapStateToProps = state => ({
    name: state.name
});

export default connect(mapStateToProps, { clicked })(Button);

import React，{Component}来自“React”
从'react redux'导入{connect}；
从“../actions/clickAction”导入{clicked}；
类按钮扩展组件{
render（）{
返回(
{this.props.name}
)
}
}
常量mapStateToProps=状态=>({
姓名：state.name
});
导出默认连接（MapStateTops，{单击}）（按钮）；

在这个问题上获得一些帮助，以便能够在Redux中采取进一步的步骤，这将是非常好的。

---

谢谢大家!

您不需要括号，请改为：

import { CLICK } from './types';

export clicked = () => {
    return {
        type: CLICK,
        payload: 'switch the describtion of the button'
    }
}

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
 rootReducer,
 applyMiddleware(thunk)
);

export default store;

switch语句中的“CLICK”类型没有更新名称，只是返回状态。而是这样做：

import { CLICK } from '../actions/types';

const initialState = {
    name: 'test'
}

export default (state = initialState, action) => {
    switch(action.type) {
        case CLICK: 
            return {
              ...state,
              name: action.payload
         }    
        default:
        return state
    }
}

您的商店信息太多，请改为执行以下操作：

import { CLICK } from './types';

export clicked = () => {
    return {
        type: CLICK,
        payload: 'switch the describtion of the button'
    }
}

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
 rootReducer,
 applyMiddleware(thunk)
);

export default store;

调用对象属性：

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { clicked } from '../actions/clickAction';

class Button extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.clicked}>{this.props.name.name}</button>
      </div>
    )
  }
}

const mapStateToProps = state => ({
    name: state.name
});

export default connect(mapStateToProps, { clicked })(Button);

import React，{Component}来自“React”
从'react redux'导入{connect}；
从“../actions/clickAction”导入{clicked}；
类按钮扩展组件{
render（）{
返回(
{this.props.name.name}
)
}
}
常量mapStateToProps=状态=>({
姓名：state.name
});
导出默认连接（MapStateTops，{单击}）（按钮）；

您不需要括号，请执行以下操作：

import { CLICK } from './types';

export clicked = () => {
    return {
        type: CLICK,
        payload: 'switch the describtion of the button'
    }
}

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
 rootReducer,
 applyMiddleware(thunk)
);

export default store;

switch语句中的“CLICK”类型没有更新名称，只是返回状态。而是这样做：

import { CLICK } from '../actions/types';

const initialState = {
    name: 'test'
}

export default (state = initialState, action) => {
    switch(action.type) {
        case CLICK: 
            return {
              ...state,
              name: action.payload
         }    
        default:
        return state
    }
}

您的商店信息太多，请改为执行以下操作：

import { CLICK } from './types';

export clicked = () => {
    return {
        type: CLICK,
        payload: 'switch the describtion of the button'
    }
}

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
 rootReducer,
 applyMiddleware(thunk)
);

export default store;

调用对象属性：

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { clicked } from '../actions/clickAction';

class Button extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.clicked}>{this.props.name.name}</button>
      </div>
    )
  }
}

const mapStateToProps = state => ({
    name: state.name
});

export default connect(mapStateToProps, { clicked })(Button);

import React，{Component}来自“React”
从'react redux'导入{connect}；
从“../actions/clickAction”导入{clicked}；
类按钮扩展组件{
render（）{
返回(
{this.props.name.name}
)
}
}
常量mapStateToProps=状态=>({
姓名：state.name
});
导出默认连接（MapStateTops，{单击}）（按钮）；

关于减速器，此解决方案仍然会导致以下错误：

Error: Objects are not valid as a React child (found: object with keys {0, 1, 2, 3}). If you meant to render a collection of children, use an array instead.
    in button (at button.js:9)
    in div (at button.js:8)
    in Button (created by ConnectFunction)
    in ConnectFunction (at App.js:12)
    in div (at App.js:11)
    in Provider (at App.js:10)
    in App (at src/index.js:6) react-dom.development.js:57
    React 15
    dispatchInteractiveEvent self-hosted:1029

---

我真的无法想象为什么会这样，因为我的解决方案看起来不错，这是一个非常原始的应用程序，用于更改按钮描述：（（（

此解决方案，关于减速器，仍然会导致以下错误：

Error: Objects are not valid as a React child (found: object with keys {0, 1, 2, 3}). If you meant to render a collection of children, use an array instead.
    in button (at button.js:9)
    in div (at button.js:8)
    in Button (created by ConnectFunction)
    in ConnectFunction (at App.js:12)
    in div (at App.js:11)
    in Provider (at App.js:10)
    in App (at src/index.js:6) react-dom.development.js:57
    React 15
    dispatchInteractiveEvent self-hosted:1029

---

我真的无法想象为什么会这样，因为我的解决方案看起来不错，这是一个非常原始的应用程序，用于更改按钮描述：((（

我对您试图实现的目标有点迷茫。您可以通过

MapStateTrops

获取您的商店状态，看起来您的设置是正确的。我对您的代码唯一的问题是您的

clickReducer

似乎没有更新您的商店（或者可能与我使用的方法不同）您的

单击的

操作不应以这种方式调用

onClick

。您可以指定您的问题到底是什么吗？是这样的吗，我单击了按钮，状态不会更新吗？onClick通过这种方式工作，但状态不会更改，因此按钮仍然保持“名称”而不是测试((((（我对您试图实现的目标有点迷茫。您可以通过

MapStateTrops

获取您的商店状态，看起来您的设置是正确的。您的代码唯一的问题是您的

clickReducer

似乎没有更新您的商店（或者可能与我使用的方法不同）您的

单击的

操作不应以这种方式调用

onClick

。您可以指定您的问题到底是什么吗？是这样的吗，我单击了按钮，状态不会更新吗？onClick通过这种方式工作，但状态不会更改，因此按钮仍然保持“名称”而不是测试((((（Thorsten，在Button.js文件上，请尝试此：{this.props.name.name}。Thorsten，在Button.js文件上，请尝试此：{this.props.name.name}。