Нужна помощь для моих первых шагов с React-Redux

Question

Я изо всех сил пытаюсь сделать свои первые шаги с Redux.Все эти уроки "Todo-App" хороши, а также уроки "Увеличить кнопку".Я думал о том, чтобы получить собственный пример, чтобы научить себя логике 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.

Вот мой абсолютно базовый код, который должен помочь мне понять логику приведения:

Тип действия:

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'
    }
}

Ваш тип "CLICK" в операторе switch не обновляет имя, вы просто возвращаете состояние.Вместо этого сделайте следующее:

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

Я действительно не могу представить, почему это так, потому что мое решение выглядит хорошо, и это очень примитивное приложение для изменения описания кнопки: ((((

)