Redux道具不起作用

嗨，我最近尝试Redux。我想建立一个练习计数器。它由两个按钮（加上&减号）和一个显示当前数字的计数器组成。Redux道具不起作用

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

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

任何帮助非常感谢。 Counter组件的

来源

2017-07-18 Yumi Chen

有与您的代码的几个问题，

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

二：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

来源

2017-07-18 08:57:54

谢谢！我现在知道了 –

你的代码应该是这样的：

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

来源

2017-07-18 08:55:00

创建连接的部件，但你永远不将其分配给变量，你把旧的“哑巴”组件在渲染到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);

来源

2017-07-18 08:55:44 Aron

我不敢肯定，但我只是用你的Codepen，似乎你忘了道具传递给你的计数器组件。

如果你计数器NUM = {4}

那么它应该工作:)

来源

2017-07-18 08:56:52 kikiwie

Redux道具不起作用

回答

相关问题