Question

我正在为Redux迈出第一步。所有这些“ Todo-App”教程都很不错，“ Increment the button”教程也很不错。我想到了以自己的榜样来教给自己Redux的逻辑，但有些方法行不通。目前，我不确定状态来自何处，因此我尝试了许多不同的变体来使Redux“启动”而没有初始化错误，并且找到了可行的解决方案！首先，我只是在化简器中设置了状态，但是没有出现按钮说明。然后，我另外在商店中设置了状态，至少按钮具有描述test123和console.log起作用。但是如何从减速器获取状态（我检查了文档，建议通过减速器而不是商店本身传递状态）。此刻，我收到以下错误：

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);

很高兴获得有关此问题的帮助，以便能够在Redux中采取进一步的措施。谢谢！

Answer 1

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

import { CLICK } from './types';

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

您在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 { 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);

Answer 2

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

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

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

在我使用React-Redux的第一步中需要帮助

2 个答案: