Question

我正试图将redux实施到react。我了解stores，reducers和actions如何运作的基础知识。我现在正在尝试设置react-redux。我知道网上有相当多的文档，而且除了解释之外，跟进还是有点棘手。

以下是我在下面尝试过的内容，但它不起作用。谁能发现一些明显的错误。我想我很亲密，但是犯了一些小错误。屏幕上根本没有渲染。

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { connect } from 'react-redux';

function counter(state = 0, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}
var store = createStore(counter);

const mapStateToProps = function(store) {
  return {
    count: store.getState()
  };
}

class App extends React.Component {
    increaseCounter() {
        store.dispatch({
            type: 'INCREMENT'
        })
    }
    render() {
        return (
            <div>
                <h1>Test</h1>   
                <h1>{this.props.count}</h1>
                <button onClick={this.increaseCounter.bind(this)}>Click here </button>
            </div>
        )
    }   
}
connect(mapStateToProps)(App);
ReactDOM.render(
    <App />
    , document.getElementById('app')
);

Answer 1

您导入的组件没有连接

connect(mapStateToProps)(App);
ReactDOM.render(
    <App />
    , document.getElementById('app')
);

试试这个

ReactDOM.render(
 connect(mapStateToProps)(App)
 , document.getElementById('app')
);

或者这个

  const ConnectedApp = connect(mapStateToProps)(App);
  ReactDOM.render(
   <ConnectedApp/>,
   document.getElementById('app')
);

Answer 2

你有一个<button/>结束元素，而不是</button>，这会阻止任何渲染。

编辑问题已更改，因此编辑：

const { Component } = React;
const { combineReducers } = Redux;
const { createStore } = Redux;
const { connect, Provider } = ReactRedux;

function counter(state = 0, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}
var store = createStore(counter);

const mapStateToProps = function(state) {
console.log(state)
  return {
    count: state
  };
}

class App extends React.Component {
    increaseCounter() {
        store.dispatch({
            type: 'INCREMENT'
        })
    }
    render() {
        return (
            <div>
                <h1>Test</h1>   
                <h1>{this.props.count}</h1>
                <button onClick={this.increaseCounter.bind(this)}>Click here </button>
            </div>
        )
    }   
}
const CApp = connect(mapStateToProps)(App);
ReactDOM.render(
    <Provider store={store}><CApp /></Provider>
    , document.getElementById('app')
);

原始代码存在一些问题：

缺少提供程序包装器
未使用连接组件

Answer 3

我们必须将我们的组件与redux-store连接起来使用store，这是通过在这种情况下将组件与store对象的require部分连接起来完成的。

const mapStateToProps = function(store) {
  return {
    users: store
  };
}

const ConnectedApp = connect(mapStateToProps)(App);

如果我们有像

这样的商店对象

{
   counter: 0,
   ...   
 }

我们可以获得反击

const mapStateToProps = function(store) {
  return {
    counter: store.counter
  };
}

接下来我们必须将商店对象提供给连接的组件。这是通过Provider包装组件来完成的。

<Provider store={store}>
   <ConnectedApp />
</Provider>

注意：使用Provider包装组件之后。我们不仅可以访问直接Component中的store对象，还可以访问其所有的decendent组件。但它应该如上所述连接。

我已经更新了你的小提琴。请看一下jsfiddle

const { Component } = React;
const { combineReducers } = Redux;
const { createStore } = Redux;
const { connect, Provider } = ReactRedux;

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

var store = createStore(counter);

const mapStateToProps = function(store) {
  return {
    users: store
  };
}

class App extends React.Component {

    increaseCounter() {
        store.dispatch({
            type: 'INCREMENT'
        })
    }

    render() {
  console.log(this.props)
        return (
            <div>
                <h1>Test</h1>   
                <h1>{this.props.users}</h1>
                <button onClick={this.increaseCounter.bind(this)}>Click here</button>
            </div>
        )
    }   
}
const ConnectedApp = connect(mapStateToProps)(App);
ReactDOM.render(
  <Provider store={store}>
    <ConnectedApp />
  </Provider>
    , document.getElementById('app')
);

设置react-redux并进行反应

3 个答案: