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道具不起作用

回答

相關問題