设置react redux with react

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

我们必须将组件与redux存储连接起来才能使用存储，这是通过将组件连接到存储对象的require部分来完成的，在本例中是存储本身。

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

const ConnectedApp = connect(mapStateToProps)(App);

如果我们有这样的存储对象

{
   counter: 0,
   ...   
 }

我们可以得到柜台

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

接下来，我们必须将存储对象提供给连接的组件。这是完成包装组件与提供程序。

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

注意:在使用提供程序包装组件之后。我们不仅可以访问直接组件内部的存储对象，还可以访问它的所有附属组件。但它应该像上面的那样连接起来。

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

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')
);

Answer 2

导入组件时不需要连接

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 3

您有一个<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')
);

原始代码有几处问题：

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