Comment réutiliser le réducteur avec la même action en utilisant le sous-espace redux

Question

Je construis une petite application en utilisant Réact, Sémantique-ui-Réaction, Redux-subsp. J'ai beaucoup de tables différentes et quand l'utilisateur clique sur l'une des cellules, la valeur supposée sortir sur la console mais le résultat est indéfini quand il a cliqué. J'essaie de réutiliser le réducteur. Même action avec différentes instances. J'apprécie tous les commentaires qui me guident vers la bonne direction.

PartA.js

Ce composant rend les tableaux et enveloppées avec <SubspaceProvider>.

<Segment inverted color='black'> 
<h1>Age </h1> 
{ this.state.toggle ? 
<SubspaceProvider mapState={state => state.withSpouseAge} namespace="withSpouseAge"> 
    <TableForm 
     headers={spouse_ageHeaders} 
     rows={spouse_ageData} 
     namespace={'withSpouseAge'} 
    /> 
</SubspaceProvider> : 
<SubspaceProvider mapState={state => state.withoutSpouseAge} namespace="withoutSpouseAge"> 
    <TableForm 
     headers={withoutSpouse_ageHeader} 
     rows={withoutSpouse_ageData} 
     namespace={'withoutSpouseAge'} 
    /> 
</SubspaceProvider> } 

TableForm.js

Ce retour composante tableau avec les données et c'est là que je veux mettre en œuvre la méthode onClick.

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Table } from 'semantic-ui-react'; 
import { select } from '../actions'; 

const shortid = require('shortid'); 

class TableForm extends Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      activeIndex: 0, 
     } 
     this.handleOnClick = this.handleOnClick.bind(this); 
     this.isCellActive = this.isCellActive.bind(this); 
    }; 

    isCellActive(index) { 
     this.setState({ activeIndex: index }); 
    } 

    handleOnClick(index, point) { 
     this.isCellActive(index); 
     this.props.onSelect(point); 
    }; 

    tableForm = ({ headers, rows }) => { 
     const customRenderRow = ({ factor, point, point2 }, index) => ({ 
      key: shortid.generate(), 
      cells: [ 
       <Table.Cell content={factor || 'N/A'} />, 
       <Table.Cell 
        content={point} 
        active={index === this.state.activeIndex} 
        textAlign={'center'} 
        selectable 
        onClick={() => this.handleOnClick(index, point)} 
       />, 
       <Table.Cell 
        content={point2} 
        textAlign={'center'} 
        selectable 
       /> 
      ], 
     }); 
     return (
      <Table 
       size='large' 
       padded 
       striped 
       celled 
       verticalAlign={'middle'} 
       headerRow={this.props.headers} 
       renderBodyRow={customRenderRow} 
       tableData={this.props.rows} 
      /> 
     ) 
    }; 

    render() { 
     console.log(this.props.withSpouseAgePoint); 
     const { headers, rows } = this.props; 
     return (
      <div> 
       {this.tableForm(headers, rows)} 
      </div> 
     ); 
    } 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSelect: (point) => {dispatch(select(point))}, 
    } 
} 

const mapStateToProps = state => { 
    return { 
     withSpouseAgePoint: state.withSpouseAge, 
     withSpouseLoePoint: state.withSpouseLoe, 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(TableForm); 

action

import { 
    SELECT, 
} from './types'; 

export const select = (points) => ({ 
    type: 'SELECT', 
    points, 
}); 

Reducer.js

import { SELECT } from '../actions/types'; 

const INITIAL_STATE = { 
    point: 0, 
}; 

const selectionReducer = (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
     case 'SELECT': 
      return { ...state, point: state.point + action.points }; 
     default: 
      return state; 
    } 
}; 

export default selectionReducer; 

Réducteur index.js

import { createStore, combineReducers } from 'redux'; 
import { subspace, namespaced } from 'redux-subspace'; 
import selectionReducer from './selectionReducer'; 
import toggleReducer from './toggleReducer'; 

const reducers = combineReducers({ 
    withSpouseAge: namespaced('withSpouseAge')(selectionReducer), 
    withSpouseLoe: namespaced('withSpouseLoe')(selectionReducer), 
    withSpouseOlp: namespaced('withSpouseOlp')(selectionReducer), 
    withSpouseOlp2: namespaced('withSpouseOlp2')(selectionReducer), 
    withSpouseExp: namespaced('withSpouseExp')(selectionReducer),  
    withoutSpouseAge: namespaced('withoutSpouseAge')(selectionReducer), 
    withoutSpouseLoe: namespaced('withoutSpouseLoe')(selectionReducer), 
    withoutSpouseOlp: namespaced('withoutSpouseOlp')(selectionReducer), 
    withoutSpouseOlp2: namespaced('withoutSpouseOlp2')(selectionReducer), 
    withoutSpouseExp: namespaced('withoutSpouseExp')(selectionReducer), 
    toggle: toggleReducer, 
}); 

Mise à jour

I ajouté ci-dessous composant Tableform

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSelect: (point) => {dispatch(select(point))}, 
    } 
} 

const mapStateToProps = state => { 
    return { 
     withSpouseAgePoint: state.withSpouseAge, 
     withSpouseLoePoint: state.withSpouseLoe, 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(TableForm); 

mettre en œuvre this.props.onSelect(point) sur handleOnClick. Il me montre toujours le même résultat undefined. J'ai vérifié les états de magasins par getState(). consloe.log. Je pense que mon implémentation de redux-subspace est fausse. J'ai téléchargé tout le composant TableForm et également le réducteur mis à jour. Sil te plait aide moi!

mise à jour 2

j'ai remplacé mapStateToProps et cela a fonctionné comme une magie. Merci encore @JustinTRoss. mais il y a un autre problème, tous les états sortent avec la même valeur quand j'ai cliqué sur la cellule. . mon plan est que chaque état a sa propre valeur stockée.

const mapStateToProps = state => { 
    return { 
     withSpouseAgePoint: state, 
     withoutSpouseAge: state, 
    } 
} 

Answer 1

Vous avez déjà votre composant espaces de noms withSpouseAge et de l'état mis en correspondance avec state.withSpouseAge dans votre SubspaceProvider. Ainsi, vous appelez l'équivalent de state.withSpouseAge.withSpouseAge (non défini).

Un autre problème potentiel est la signature avec laquelle vous appelez connect. De l'extrait que vous avez fourni, il n'y a aucun moyen d'être sûr de la valeur de 'select'. Typiquement, connect est appelé avec 2 fonctions, souvent nommées mapStateToProps et mapDispatchToProps. Vous appelez connect avec une fonction et un objet. Voici un exemple de http://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/#connect:

import {connect} from 'react-redux' 

const TodoItem = ({todo, destroyTodo}) => { 
    return (
    <div> 
     {todo.text} 
     <span onClick={destroyTodo}> x </span> 
    </div> 
) 
} 

const mapStateToProps = state => { 
    return { 
    todo : state.todos[0] 
    } 
} 

const mapDispatchToProps = dispatch => { 
    return { 
    destroyTodo :() => dispatch({ 
     type : 'DESTROY_TODO' 
    }) 
    } 
} 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(TodoItem) 

De plus, il y a une autre question, même si elle ne vous affecte encore: Tu appelles this.tableForm avec 2 arguments (en-têtes et lignes), alors que vous avez défini le présent .La fonction tableForm permet de prendre un seul argument et de déstructurer les propriétés 'headers' et 'rows'.