Réagir le composant connecté ne pas ré-émettre après l'extraction de données

Question

J'essaye d'obtenir un rendu graphique D3 en utilisant React et Redux. Je suis en mesure de voir les données renvoyées par le réducteur comme prévu, c'est-à-dire avec un tableau data de 50 objets. Mais la fonction de rendu n'est pas appelée après la récupération des données. Je suis lu beaucoup de problèmes passés autour de l'état de mutation, mais je comprends que je ne le fais pas quand j'utilise Object.assign({}, state, data)

Le journal de la console dans le réducteur imprime les données correctes.

Quelqu'un peut-il voir ce que je fais mal?

composants

class D3 extends Component { 
    constructor(props) { 
     super(props); 
    } 

    componentDidMount(){ 
     this.props.dispatch(fetchData()); 
    } 

    randomizeData() { 
     this.props.dispatch(randomizeData()) 
    } 

    render() { 
     return (
      <div> 
       <ScatterPlot {...this.props.data} {...styles} /> 
       <div className="controls"> 
        <button 
         onClick={() => this.randomizeData()} 
        > 
         Randomize Data 
        </button> 
       </div> 
      </div> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     data: state.data 
    } 
}; 

export default connect(mapStateToProps)(D3); 

Actions

// The number of data points for the chart. 
const numDataPoints = 50; 

// A function that returns a random number from 0 to 1000. 
const randomNum =() => Math.floor(Math.random() * 1000); 

// A function that creates an array of 50 elements of (x, y) coordinates. 
const randomDataSet =() => { 
    return Array.from(Array(numDataPoints)).map(() => [randomNum(), randomNum()]); 
}; 

const requestData =() => ({ 
    type: 'REQUEST_DATA' 
}); 

const receiveData = json => { 
    return ({ 
    type: 'RECEIVE_DATA', 
    data: json, 
    receivedAt: Date.now() 
})}; 

export const fetchData =() => (dispatch) => { 
    dispatch(requestData()); 
    dispatch(receiveData(randomDataSet())); 
}; 

export const randomizeData =() => (dispatch) => { 
    dispatch(receiveData(randomDataSet())); 
}; 

Réducteur

const initialState = { data: [] }; 

const d3 = (state = initialState, action) => { 
    switch (action.type) { 

    case 'REQUEST_DATA': { 
     return Object.assign({}, state, { 
      isFetching: true 
     }); 
    } 
    case 'RECEIVE_DATA': { 
     const result = Object.assign({}, state, { 
      isFetching: false, 
      data: action.data, 
      lastUpdated: action.receivedAt 
     }); 
     console.log(result) 
     return result; 
    } 

    default: return state; 
    } 
}; 

export default d3; 

ScatterPlot.jsx

import React from 'react'; 
import * as d3 from 'd3'; 
import DataCircles from '../../../molecules/Chart/DataCircles'; 
import Axis from '../../../molecules/Chart/Axis'; 

// Returns the largest X coordinate from the data set. 
const xMax = data => d3.max(data, d => d[0]); 

// Returns the higest Y coordinate from the data set. 
const yMax = data => d3.max(data, d => d[1]); 

// Returns a function that "scales" X coordinates from the data to fit the chart. 
const xScale = props => { 
    return d3 
     .scaleLinear() 
     .domain([0, xMax(props.data)]) 
     .range([props.padding, props.width - props.padding * 2]); 
}; 

// Returns a function that "scales" Y coordinates from the data to fit the chart. 
const yScale = props => { 
    return d3 
     .scaleLinear() 
     .domain([0, yMax(props.data)]) 
     .range([props.height - props.padding, props.padding]); 
}; 

const ScatterPlot = props => { 

    if(props.data){ 
     const scales = { xScale: xScale(props), yScale: yScale(props) }; 
     return (
      <svg width={props.width} height={props.height}> 
       <DataCircles {...props} {...scales} /> 
       <Axis ax={'x'} {...props} {...scales} /> 
       <Axis ax={'y'} {...props} {...scales} /> 
      </svg> 
     ); 
    } else { 
     return null; 
    } 

}; 


export default ScatterPlot; 

Answer 1

Je pense qu'il ya une faute de frappe ici

<ScatterPlot {...this.props} {...styles} />