react-redux中connect获取不到store中的state(undefined)
发布于 1 年前 作者 1261407209LHH 2493 次浏览 来自 问答

Counter里面可以使用dispatch对store的数据进行增减,但是connect时候报错如下:

微信截图_20190528175815.png

Counter使用store页

import React,{Component} from 'react';
import { connect } from "react-redux";
import {INCREMENT,DECREMENT} from '../../redux/actions';
class Counter extends Component{
    increment = ()=>{
        this.props.dispatch({
            type:INCREMENT
        })
    }
    decrement = ()=>{
        this.props.dispatch({
            type:DECREMENT
        })
    }
    render(){
        return (
            <div>
                <h2>Counter</h2>
                <div>
                    <button onClick={this.decrement}>-</button>
                    <span>{this.props.count}</span>
                    <button onClick={this.increment}>+</button>
                </div>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    console.log(state);
    return ({
      count: state.count
    });
}
export default connect(mapStateToProps)(Counter);

App.js入口文件

import React,{Component} from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
// import createBrowserHistory from 'history/createBrowserHistory';
import {Provider} from 'react-redux';
import {store} from './redux/index.js';
import Home from './views/Home';
import Topics from './views/Topics';
import About from './views/About';
import Counter from './views/Counter'
import './App.css';
class App extends Component{
  render(){
    // const customHistory = createBrowserHistory();
    return (
      <Provider store={store}>
        <Router>
          <div>
            <nav>
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/topics">Topics</Link></li>
              </ul>
            </nav>
            <Counter/>
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/topics" component={Topics}/>
          </div>
        </Router>
      </Provider>
    )
  }
}
export default App;

redux/index.js

import {createStore} from 'redux';
import reducer from './reducer';
export const store = createStore(reducer);

redux/reducer.js

const initialState = {
    count: 0
};
function reducer(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return {
                count: state.count + 1
            };
        case 'DECREMENT':
            return {
                count: state.count - 1
            };
        case 'RESET':
            return {
                count: 0
            }
    }
}
export default reducer;

redux/actions.js

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';
2 回复

你这个问题 比较多,这个是中文网Redux 中文文档

@afacode 谢谢,这个已经解决了,是reducer.js没有提供defaultState的返回,所以在后面加上:

default:
	return {
		count:state.count
	}
回到顶部