Question

我倾向于使用redux，我正在尝试创建一个简单的测试应用程序，看看我是否可以将redux中的道具传递给反应组件，但它不会像我期望的那样工作。商店它自己工作正常，但它没有传递给我的组件的价值可以有一个请指出我的代码的问题？谢谢。

 const randomNum=()=>{...}
    const ReduxPropsTest =(props)=>(

        <div>
            <button onClick={()=>console.log('but this component does not have the props',props.array)}>test</button>
    </div>
)

const mapStateToProps=state=>{
    {array:state.reducer}
}
connect(mapStateToProps)(ReduxPropsTest)

//actions
const addItem=(array=[])=>(
    {
        type:'ADD_ITEM',
        array,
    }
)

//reducer
const reducer=(state=[],action)=>{
    switch(action.type){
        case 'ADD_ITEM':
        return [
            ...state,
            action.array
        ]

        default:
        return state;
    }
}

//store
const store=createStore(reducer) 

//create test state
store.subscribe(()=>{
    const state=store.getState();
    console.log('I dispatched successfully: ',state)
})
const Jsx=()=>(
    <Provider store={store}>
        <ReduxPropsTest/>
    </Provider>
)
store.dispatch(addItem({array:randomNum()}))
store.dispatch(addItem({array:randomNum()}))
store.dispatch(addItem({array:randomNum()}))
store.dispatch(addItem({array:randomNum()}))

ReactDom.render(<Jsx/>,document.getElementById('app'))

这是我的问题的图片

我试图根据一些建议纠正我的代码，到目前为止我还没有工作

const randomNum=()=>{...}

const ReduxPropsTest =(props)=>(

    <div>
        <button onClick={()=>console.log('but this component does not have the props',props.array)}>test</button>
    </div>
)

const mapStateToProps=state=>({
    array:state.reducer
})
const Connected = connect(mapStateToProps)(ReduxPropsTest)

const addItem=(array=[])=>(
    {
        type:'ADD_ITEM',
        array,
    }
)

const reducer=(state=[],action)=>{
    switch(action.type){
        case 'ADD_ITEM':
        return [
            ...state,
            action.array
        ]

        default:
        return state;
    }
}

const store=createStore(reducer) 
store.subscribe(()=>{
    const state=store.getState();
    console.log('I dispatched successfully: ',state)
})
const Jsx=()=>(
    <Provider store={store}>
        <Connected/>
    </Provider>
)
store.dispatch(addItem({array:randomNum()}))
store.dispatch(addItem({array:randomNum()}))
store.dispatch(addItem({array:randomNum()}))
store.dispatch(addItem({array:randomNum()}))

ReactDom.render(<Jsx/>,document.getElementById('app'))

这是错误的图片

Answer 1

connect正在返回一个新组件，这是您需要使用的组件这一行：

connect(mapStateToProps)(ReduxPropsTest)

不会做任何事情，因为您没有使用从connect返回的新组件。

const Connected = connect(mapStateToProps)(ReduxPropsTest);

现在传递新组件：

const Jsx=()=>(
    <Provider store={store}>
        <Connected/>
    </Provider>
)

另一件事，你没有在mapstateToProps内返回一个对象：

const mapStateToProps=state=>({
    array:state.reducer
})

修改
这里的另一个问题是你传递给一个数组的状态。不一个密钥reducer的对象，就像您在mapstateToProps内所期望的那样。

您可以使用redux的{{3}}方法创建一个将公开键值对象对象的缩减器（根缩减器）：

const comboReducers = combineReducers({ reducer }); const store = createStore(comboReducers)

然后，您可以使用reducer内的mapStateToProps密钥。

工作示例：

const { createStore, combineReducers } = Redux; const { Provider, connect } = ReactRedux; const randomNum = () => { return Math.random() }; const ReduxPropsTest = (props) => ( <div> <button onClick={() => console.log('but this component does have the props', props.array)}>test</button> </div> ) const mapStateToProps = state => ({ array: state.reducer }) const Connected = connect(mapStateToProps)(ReduxPropsTest) const addItem = (array = []) => ( { type: 'ADD_ITEM', array, } ) const reducer = (state = [], action) => { switch (action.type) { case 'ADD_ITEM': return [ ...state, action.array ] default: return state; } } const comboReducers = combineReducers({ reducer }); const store = createStore(comboReducers) store.subscribe(() => { const state = store.getState(); console.log('I dispatched successfully: ', state) }) const Jsx = () => ( <Provider store={store}> <Connected /> </Provider> ) store.dispatch(addItem({ array: randomNum() })) store.dispatch(addItem({ array: randomNum() })) store.dispatch(addItem({ array: randomNum() })) store.dispatch(addItem({ array: randomNum() })) ReactDOM.render(<Jsx />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script> <div id="app"></div>

Answer 2

在mapstatToprops中添加返回，如

const mapStateToProps=state=>{
    return {array:state.reducer}
}

redux和react连接不起作用？

2 个答案: