redux 和 react 连接不起作用？

Question

我正在学习 redux，我正在尝试创建一个简单的测试应用程序，看看我是否可以将 props 从 redux 传递到 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'))

这是我的问题的图片

我尝试根据一些建议更正我的代码，目前我none正在工作

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

在 mapstatToprops 中添加 return like

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

Answer 2

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 的 combineReducers 方法来创建将公开键值对对象的单个缩减器（根缩减器）：

const comboReducers = combineReducers({
  reducer
});

const store = createStore(comboReducers)

然后你的mapStateToProps里面就有一把reducer的钥匙可以玩了。

工作示例：

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>

redux 和 react 连接不起作用？

redux and react connect does not work?

reactjs

redux

react-redux

react-props