Question

我正在尝试在视图上呈现商店的价值，但未呈现。我不知道为什么它没有渲染。有人可以解释我为什么吗？（我已经看过丹·阿布拉莫夫（Dan Abramov）关于“蛋头”的课程，但我仍然不明白）

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import { createStore } from 'redux';

const reducer = (state = 0, action) => {
  switch(action.type) {
    case 'INCREMENT':
      console.log('Increment', state);

      return ++state;

    case 'DECREMENT':
      console.log('Decrement', state);

      return --state;

    default:
      return state;
  }
} 

const store = createStore(
  reducer
)

class App extends Component {
  render() {
    return (
      <div>
        <p>{JSON.stringify(this.props.store)}</p>

        <button onClick={() => store.dispatch({type: 'INCREMENT'})}>+</button>

        <button onClick={() => store.dispatch({type: 'DECREMENT'})}>-</button>
      </div>
    );
  }
}

ReactDOM.render(
  <App store={store} />,
  document.getElementById('root')
);

Answer 1

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import { createStore } from 'redux';

const reducer = (state = 0, action) => {
  switch(action.type) {
    case 'INCREMENT':
      console.log('Increment', state);

      return ++state;

    case 'DECREMENT':
      console.log('Decrement', state);

      return --state;

    default:
      return state;
  }
} 

const store = createStore(
  reducer
);

class App extends Component {
  update() {
      this.forceUpdate();
  }
  componentDidMount(){
    this.unsubscribe = store.subscribe(this.update.bind(this));
  }
  componentWillUnmount(){
      this.unsubscribe();
  }
  render() {
    return (
      <div>
        <p>{JSON.stringify(store.getState())}</p>

        <button onClick={() => store.dispatch({type: 'INCREMENT'})}>+</button>

        <button onClick={() => store.dispatch({type: 'DECREMENT'})}>-</button>
      </div>
    );
  }
}


export default App;

Answer 2

使用Redux Connect访问组件中的状态

例如：

export default connect(mapStateToProps, actions)(yourComponent);

Answer 3

检查此

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';

import reducers from './reducers';
const store = createStore(
  reducers,
  applyMiddleware(reduxThunk)// not needed
);
ReactDOM.render(
  <Provider store={store}>  
      <App/> 
  </Provider>,
  document.querySelector('#root')
);

应用程序组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';

class Signout extends Component {
  componentDidMount() {
    console.log(this.props.data);
  }

  render() {
    return <div>Sorry to see you go</div>;
  }
}
function mapStateToProps(state) {
  return { data: state.data};
}

export default connect(mapStateToProps, actions)(App);

Answer 4

您不应该直接改变状态。而是这样做：

return state + 1; // instead of ++state
return state - 1; // instead of --state

呈现状态：

class App extends Component {
  render() {
    return (
      <div>
        <p>{store.getState()}</p>

要获取商店的更改，您还需要订阅更改：

const unsubscribe = store.subscribe( // generally, this is called on event handler
  ReactDOM.render(
    <App store={store} />,
    document.getElementById('root')
  )
)
unsubscribe()

您还可以订阅componentDidMount中的更改，然后在componentWillUnmount生命周期挂钩中取消订阅。您可以查看henok tesfaye提供的答案：subscribing and unsubscribing in lifecycle。

您可以从docs阅读它，以了解更多信息。

但是一般来说，我们不需要订阅者。我们可以通过使用connect映射状态来获取更改。 blog对此进行了很好的解释。因此，我建议您看看Usage with react

Redux不呈现商店的内容

4 个答案: