用react设置react-redux

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部分连接而实现的，在这种情况下为store本身。

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内部的存储对象，还可以访问其所有劣势组件。 但它应该与以上连接。

我已经更新了你的小提琴。 请看看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')
);