Question

我遇到了大麻烦，因为我确实需要加速学习反应/减少。我有2个组件，一个组成一个输出。该表单勇敢地调度我的操作，我正在通过订阅我的控制台来记录更改：everythings正确且正确，但以下组件不会重新呈现...任何想法？

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

const mapStateToProps = state => {
  return { message: state.message, speaker: state.speaker };
};

class connectedOutput extends Component {
    render(){
        const{message, speaker} = this.props
        return (<p>{speaker}: &nbsp;{message}</p>)
    }
}

const Output = connect(mapStateToProps)(connectedOutput);
export default Output;

这是我的减速机：

import { MESSAGE } from "../constants/action-types";
import { SPEAKER } from "../constants/action-types";
const initialState = {message:'Something', speaker:'Scotty'}

const basicReducer = (state = initialState, action) => {

    let speaker = state.speaker == 'Scotty' ? 'Bones' : 'Scotty';
    switch(action.type){
        case MESSAGE:
            Object.assign(state, action.message)
                return state;
            case SPEAKER:
                Object.assign(state, {speaker});
                return state;
            default:    
                return state;
        }
    };

    export default basicReducer;

初始状态正确呈现...... 这是我的包装提供商

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("appMount")
);

Answer 1

您没有从Object.assign返回新状态并始终返回旧状态。修正：

class SearchHumanType extends AbstractType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add(
                'surname',
                TextType::class,
                [
                    'label' => "surname",
                    'mapped' => false,
                    'required' => false,
                ]
            );
    }
    //[...]
}

Answer 2

现在正确的减速器是：

switch(action.type){
    case MESSAGE:
        return Object.assign({}, state, action.message )
    case SPEAKER:
        return Object.assign({}, state, { speaker });
    default:    
        return state;
}

在状态改变后，react / redux组件不会重新渲染

2 个答案: