reduxと反応接続が機能しませんか？

Question

私はreduxに傾いています、私はreduxから部品を反応させるかどうかを知るために単純なテストアプリを作成しようとしていますが、期待通りに機能しません。それは自己完璧に動作しますが、それは私のコンポーネントに値を渡しませんいくつかの1つ私のコードで問題を指摘してください？ありがとう。

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から返された新しいコンポーネントを使用していないよう

connect(mapStateToProps)(ReduxPropsTest) 

は、何もしません。

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

別の事、あなたがmapstateToProps内のオブジェクトを返すされていません：

const Connected = connect(mapStateToProps)(ReduxPropsTest); 

は今、新しいコンポーネント渡す

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

編集
ここでもう一つの問題を、ということですあなたは配列に状態を渡します。 reducerのようなものがありますので、内部にはmapstateToPropsのようなものがあります。

あなたは、キーと値のペアのオブジェクトを公開します単一減速（ルート減速）を作成するreduxのcombineReducers方法を使用することができます。

const comboReducers = combineReducers({ 
    reducer 
}); 

const store = createStore(comboReducers) 

次に、あなたがあなたのmapStateToPropsその内reducerの鍵を持っていますあなたは一緒に遊ぶことができます。

の作業例：Shubhamカトリ@

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

return to mapstatTops like

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