3

我正在学习 redux，我正在尝试创建一个简单的测试应用程序，以查看是否可以将来自 redux 的 props 传递给 react 组件，但它并没有像我预期的那样工作。它自己的商店工作正常，但它没有将价值传递给我的组件，有人可以指出我的代码的问题吗？谢谢。

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

这是错误的图片 在此处输入图像描述

4

2 回答 2

3

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。

您可以使用combineReducers方法redux创建一个将公开键值对对象的单个 reducer（根 reducer）： 

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>

于 2017-12-30T14:18:32.633 回答
0

在 mapstatToprops 中添加返回，例如

const mapStateToProps=state=>{
    return {array:state.reducer}
}
于 2017-12-30T14:17:58.243 回答