即使在调度之后也无法更新 redux 状态

Question

我无法更新我的 redux 存储，正如我在 chrome 中的 redux 工具中看到的那样，动作被调度，但是它返回一个新的处理程序对象，其中反映了更改但主存储没有更改，作为结果组件没有获得更新的值。 下面是我的代码的 sn-p。

为chrome附加redux js工具

实际商店

export default function () {
    return{
        flowType : 'IAU',
        customerId : 'fasfa',
        actNumber : 'asfas'
      };
}

合并所有减速器

import DataReducer from './DataReducer';
import Handler from './ReducerHandler'

const allReducers =Redux.combineReducers({
    appdata : DataReducer,
    handler : Handler
});


export default allReducers;

使用渲染表单。

import {setFlowType,setUserId,setServiceNumber} from './actions/Index';

let {createStore} = Redux
let {connect, Provider} = ReactRedux
const store = createStore(allReducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

        ........
         ........
        `ReactDOM.render(<Provider store={store}><UserInputForm/></Provider>,document.getElementById('UserInput'));`

减速器

var initialState = {
        customerId : 'blablabla',
        actNumber : 'blabla'
      };

export default function(data=initialState,action) {  
    switch(action.type) {
        case 'ACCOUNT_NUMBER_CHANGED':
            return Object.assign({},data,{actNumber : action.actNumber});
        case 'USERID_CHANGED':
            return Object.assign({},data,{customerId : action.customerId});
    }
}

用户输入表单

var UserInputForm = React.createClass({
    render: function(){
    return (

    <div className="container-fluid">
    <div className="row">
    <div className="col-sm-3"></div>
    <div className="col-sm-8">
    <div className="row">
    <div className="form-group">
                                <div className="col-sm-4">
                                    <label htmlFor="UserId" >User Id</label>
                                </div>
                                <div className="col-sm-8">
                                    <input type="text" id="UserId" className="form-control" defaultValue={this.props.storeData.customerId} onChange={(event) => this.props.setUserId(event)}></input>
                                </div>
                            </div>
                        </div>
<div className="row">
                            <div className="form-group">
                                <div className="col-sm-4">
                                    <label htmlFor='ServiceNumber'>serviceNumber</label>
                                </div>
                                <div className="col-sm-8">
                                    <input type="text" id="ServiceNumber" className="form-control" defaultValue={this.props.storeData.actNumber} onChange={(event) => this.props.setServiceNumber(event)}></input>
                                </div>
                            </div>
                        </div>
<div className="col-sm-1"></div>
                    </div>
                </div>
            </div>
            );
        }
});

    function matchDispatchToProps(dispatch){
        return bindActionCreators( {setUserId :setUserId , setServiceNumber:setServiceNumber}, dispatch);
}

export default connect(mapStateToProps,matchDispatchToProps)(UserInputForm);

动作创作者

export const setUserId = function (event) {  
  return{
      type : types.USERID_CHANGED,
      customerId : event.target.value
  }
}

export const setServiceNumber = function (event) {  
  return{
      type : types.ACCOUNT_NUMBER_CHANGED,
      actNumber : event.target.value
  }
}

Answer 1

你写的是matchDispatchToProps而不是mapDispatchToProps。此外，您还没有定义您在连接中使用的 mapStateToProps 函数，执行此操作并根据您在代码中从 mapStateToProps 返回的道具进行更改，它应该可以工作

var UserInputForm = React.createClass({
    render: function(){
    return (

    <div className="container-fluid">
    <div className="row">
    <div className="col-sm-3"></div>
    <div className="col-sm-8">
    <div className="row">
    <div className="form-group">
                                <div className="col-sm-4">
                                    <label htmlFor="UserId" >User Id</label>
                                </div>
                                <div className="col-sm-8">
                                    <input type="text" id="UserId" className="form-control" defaultValue={this.props.appData.customerId} onChange={(event) => this.props.setUserId(event)}></input>
                                </div>
                            </div>
                        </div>
<div className="row">
                            <div className="form-group">
                                <div className="col-sm-4">
                                    <label htmlFor='ServiceNumber'>serviceNumber</label>
                                </div>
                                <div className="col-sm-8">
                                    <input type="text" id="ServiceNumber" className="form-control" defaultValue={this.props.appData.actNumber} onChange={(event) => this.props.setServiceNumber(event)}></input>
                                </div>
                            </div>
                        </div>
<div className="col-sm-1"></div>
                    </div>
                </div>
            </div>
            );
        }
});

  function mapStateToProps(state) {
     return {
         appData: state.appData,
         handlerData: state.handler

      }
  }
    function mapDispatchToProps(dispatch){
        return bindActionCreators( {setUserId :setUserId , setServiceNumber:setServiceNumber}, dispatch);
}

export default connect(mapStateToProps,mapDispatchToProps)(UserInputForm);

Answer 2

这个问题是由于结合了 reducers 代码块，因为我已经将 2 个 store 副本传递给它

const allReducers =Redux.combineReducers({
    appdata : data,
    handler : Handler
});

由于有两个应对方案，Reducer 正在更新对处理程序的更改，而其他组件正在使用 appdata，因此不会反映更改。我通过使用修复它

const allReducers =Redux.combineReducers({
    appdata : Handler
});