Question

我无法更新我的redux存储，我可以在chrome中的redux工具中看到这些操作，但是它会返回一个新的处理程序对象，其中更改会被反映但主存储不会更改，因为结果组件没有获得更新值。下面是我的代码片段。

为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'));`

Reducer

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

UserInputForm

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

这个问题是由于我将两个商店的副本传递给了

，因此减少了代码块

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

由于有两个cope和Reducer正在更新处理程序的更改，而其他组件正在使用appdata，因此未反映更改。我用

修复了它

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

即使在发送

2 个答案: