Question

您好我最近在尝试Redux。我想建立一个练习柜台。它由两个按钮（加上＆amp;减号）和一个显示当前数字的计数器组成。

动作创建者和减少者连接到相应的组件。商店也连接到提供商。然而，我不知道为什么，但是初始数字（作为计数器组件的道具传递的状态）没有显示？

使用Javascript：

/*--Reducers--*/
const reducer_num = (state=0,action)=>{
  switch(action.type){
    case "PLUS":
    case "MINUS":
      return state + action.payload;
    default:
      return state;
  }
}

const rootReducer = Redux.combineReducers({
  num: reducer_num
});

/*--Action creators--*/
const action_plus = ()=>{
  return {
    type: "PLUS",
    payload: 1
  };
}

const action_minus = ()=>{
  return {
    type: "MINUS",
    payload: -1
  };
}

/*--Components & containers--*/
//counter
const Counter = (props)=>{
  return (<div className="counter">{props.num}</div>);
}

const mapStateToProps=(state)=>{
  return {num: state.num};
}

ReactRedux.connect(mapStateToProps)(Counter);

//plus
const Plus = (props)=>{
  return (<div className="plus" onClick={props.plus}>+</div>);
}

const mapDispatchToProps_plus = (dispatch)=>{
  return Redux.bindActionCreators({plus: action_plus},dispatch);
}

ReactRedux.connect(mapDispatchToProps_plus)(Plus);

//minus
const Minus = (props)=>{
  return (<div onClick={props.minus} className="minus">-</div>);
}

const mapDispatchToProps_minus = (dispatch)=>{
  return Redux.bindActionCreators({minus: action_minus},dispatch);
}

ReactRedux.connect(mapDispatchToProps_minus)(Minus);

// Provider & store
const Provider = ReactRedux.Provider,
      store = Redux.createStore(rootReducer);
//App
const App = ()=>{
  return (
    <Provider store={store}>
    <div className="container">
    <Plus/>
    <Counter/>
    <Minus/>
    </div>
      </Provider>
  );
}

ReactDOM.render(<App/>,document.body);

非常感谢您的帮助。

Answer 1

您的代码存在一些问题，

首先： mapDispatchToProps是connect函数的第二个参数，当您没有mapStateToProps函数时，您需要传递第一个函数参数为null

第二： connect返回连接到您需要使用的商店的组件，但您没有使用

完整代码：

/*--Reducers--*/
const reducer_num = (state=0,action)=>{
  switch(action.type){
    case "PLUS":
    case "MINUS":
       console.log(action.type)
      return state + action.payload;
    default:
      return state;
  }
}

const rootReducer = Redux.combineReducers({
  num: reducer_num
});

/*--Action creators--*/
const action_plus = ()=>{
  return {
    type: "PLUS",
    payload: 1
  };
}

const action_minus = ()=>{
  console.log('minus')
  return {
    type: "MINUS",
    payload: -1
  };
}

/*--Components & containers--*/
//counter
let Counter = (props)=>{
  return (<div className="counter">{props.num}</div>);
}

const mapStateToProps=(state)=>{
  return {num: state.num};
}

Counter = ReactRedux.connect(mapStateToProps)(Counter);

//plus
let Plus = (props)=>{
  return (<div className="plus" onClick={props.plus}>+</div>);
}

const mapDispatchToProps_plus = (dispatch)=>{
  return Redux.bindActionCreators({plus: action_plus},dispatch);
}

Plus = ReactRedux.connect(null,mapDispatchToProps_plus)(Plus);

//minus
let Minus = (props)=>{
  console.log(props);
  return (<div onClick={props.minus} className="minus">-</div>);
}

const mapDispatchToProps_minus = (dispatch)=>{
  return Redux.bindActionCreators({minus: action_minus},dispatch);
}

Minus=ReactRedux.connect(null,mapDispatchToProps_minus)(Minus);

// Provider & store
const Provider = ReactRedux.Provider,
      store = Redux.createStore(rootReducer);
//App
const App = ()=>{
  return (
    <Provider store={store}>
    <div className="container">
    <Plus/>
    <Counter/>
    <Minus/>
    </div>
      </Provider>
  );
}

  ReactDOM.render(<App/>,document.body);

<强> CODEPEN

Answer 2

Counter组件的代码应如下所示：

let Counter = (props)=>{
  return (<div className="counter">{props.num}</div>);
}

Counter = ReactRedux.connect(mapStateToProps)(Counter);

您必须呈现connect函数返回的组件。类似的错误出现在Plus和Minus。

您提供了mapDispatchToProps_minus作为Plus和Minus组件的第一个参数，这是错误的。第一个参数应为mapStateToProps

const mapStateToProps = () => ({})
ReactRedux.connect(mapStateToProps, mapDispatchToProps_minus)(Minus);

Answer 3

我不确定，但我刚刚使用了您的Codepen，似乎您忘记将道具传递给您的计数器组件。

如果你这样做 Counter num = {4}

然后它应该工作：）

Answer 4

您创建了连接组件，但从未将它们分配给变量，并且将旧的“哑”组件放在您呈现给DOM的主组件中。

I've created a fixed version of your CodePen.

/*--Reducers--*/
const reducer_num = (state = 0, action) => {
  switch (action.type) {
    case "PLUS":
    case "MINUS":
      return state + action.payload;
    default:
      return state;
  }
};

const rootReducer = Redux.combineReducers({
  num: reducer_num
});

/*--Action creators--*/
const action_plus = () => {
  return {
    type: "PLUS",
    payload: 1
  };
};

const action_minus = () => {
  return {
    type: "MINUS",
    payload: -1
  };
};

/*--Components & containers--*/
//counter
const Counter = props => {
  return <div className="counter">{props.num}</div>;
};

const mapStateToProps = state => {
  return { num: state.num };
};

const CounterContainer = ReactRedux.connect(mapStateToProps)(Counter);

//plus
const Plus = props => {
  return <div className="plus" onClick={props.plus}>+</div>;
};

const mapDispatchToProps_plus = dispatch => {
  return Redux.bindActionCreators({ plus: action_plus }, dispatch);
};

const PlusContainer = ReactRedux.connect(mapDispatchToProps_plus)(Plus);

//minus
const Minus = props => {
  return <div onClick={props.minus} className="minus">-</div>;
};

const mapDispatchToProps_minus = dispatch => {
  return Redux.bindActionCreators({ minus: action_minus }, dispatch);
};

const MinusContainer = ReactRedux.connect(mapDispatchToProps_minus)(Minus);

// Provider & store
const Provider = ReactRedux.Provider,
  store = Redux.createStore(rootReducer);
//App
const App = () => {
  return (
    <Provider store={store}>
      <div className="container">
        <PlusContainer />
        <CounterContainer />
        <MinusContainer />
      </div>
    </Provider>
  );
};

ReactDOM.render(<App />, document.body);

Redux道具不起作用

4 个答案: