Gatsby-Redux: компонент не перерисовывается при изменении состояния - PullRequest
Новая
       22

Gatsby-Redux: компонент не перерисовывается при изменении состояния

0 голосов
/ 27 октября 2019

когда я реализовывал Redux в моем проекте Gatsby , я увидел, что мой компонент не выполняет рендеринг при изменении состояния компонента (и да, я лечил состояниекак неизменяемый).

Поэтому я использовал пример Conuter от Redux и скопировал его код в мой проект Gatsby. И проблема снова возникла, компонент не может повторно выполнить рендеринг при изменении состояния (используя один из примеров Redux!).

Только с помощью this.forceUpdate() я смог получить компонент повторного рендерингапри изменении состояния, и когда я удалил эту строку, он перестал перерисовывать при изменении состояния.

Это созданная мной страница Gatsby и код Redux, в который я скопировал: 

import React, { Component } from 'react'
import { createStore } from 'redux'

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

  render() {
    console.log("render - start",JSON.stringify(store.getState(),null,2))
    const { value, onIncrement, onDecrement } = this.props
    return (
      <p>
        Clicked: {value} times
        {' '}
        <button onClick={onIncrement}>
          +
        </button>
        {' '}
        <button onClick={onDecrement}>
          -
        </button>
      </p>
    )
  }
}

const counter = (state = 0, action) => {
  console.log("reducer - start: ",state, JSON.stringify(action,null,2))
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

const store = createStore(counter)

class TestPage extends React.Component {
  render(){
    return (
      <Counter
        value={store.getState()}
        onIncrement={() => {
          store.dispatch({ type: 'INCREMENT' })
          // this.forceUpdate()
        }}
        onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
      />)
  }
}

export default TestPage

1 Ответ

1 голос
/ 27 октября 2019

Правильно ли вы хранили.subsribe ()?

Я заставил работать так:

index.js 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { store } from "./store";
import Counter from "./Counter";

class App extends Component {
  render() {
    return (
      <Counter
        value={store.getState()}
        onIncrement={() => {
          store.dispatch({ type: "INCREMENT" });
        }}
        onDecrement={() => store.dispatch({ type: "DECREMENT" })}
      />
    );
  }
}

const rootElement = document.getElementById("root");
const render = () => ReactDOM.render(<App />, rootElement);

render();
store.subscribe(render);

store.js 

import { createStore } from "redux";

const counter = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};


export const   store = createStore(counter);

Counter.js 

import React, { Component } from 'react'

class Counter extends Component {

  render() {

    const { value, onIncrement, onDecrement } = this.props
    return (
      <p>
        Value: {value} 
        {' '}
        <button onClick={onIncrement}>
          +
        </button>
        {' '}
        <button onClick={onDecrement}>
          -
        </button>
      </p>
    )
  }
}

export default Counter;

Образцы кодов и коробка: https://codesandbox.io/s/redux-counter-2oftu

Кстати, использование избыточности в реакции так не имеет большого смысла, мы обычно используемредукционный пакет. Вы обязательно должны использовать пакет response-redux после изучения основ редукса.

https://react -redux.js.org /

...