Question

这里是完整的code。

App.js

import React, { Component } from 'react';
import './App.css';
import Home from './containers/Home';

class App extends Component {
  render() {
    return (
      <div className="App">
          <Home />
      </div>
    );
  }
}

export default App;

src / containers / Home / Home.js

// react
import React, { PropTypes } from 'react';
// css
import './Home.css';

// after the map, can get from props
const Home = (props) => {

    console.log('-- home --');
    console.log(props);

    return (
      <div>
          <h3>output: {props.homeClick}</h3>
          <div className="Home">Home</div>
          <button onClick={() => {props.homeClickAction(1)}}>test click</button>
      </div>
    );
};

// attr
Home.propTypes = {

};

export default Home;

文件之一：src / containers / Home / Home.container.js

import React, {Component} from 'react';
import { connect } from 'react-redux'
import {homeClickAction} from './home.action';
import Home from './Home';

// NOTE: for state.reducer.var
const mapStateToProps = state => {
    return {
        homeClick: state.homeReducer.homeClick
    }
}

// const var
// dispatch
// return
// key
// data => { fire(actionCreator(data)) }
const mapDispatchToProps = dispatch => {
    return {
        homeClickAction: data => {
            dispatch(homeClickAction(data))
        }
    }
}

const HomeContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(Home);

export default HomeContainer;

是否有可能经历loading: true之类的内部状态而无需经历redux？

Answer 1

有点难以解释，我只是将代码粘贴到这里，但这确实很直观，我认为您一定被困在很小的东西上，所以您无法弄清楚。

import React, {Component} from 'react';
import { connect } from 'react-redux'
import {homeClickAction} from './home.action';
import Home from './Home';

class HomeCombined extends React.PureComponent {
  state = {
    loading: false,
  };

  render() {
    const { loading } = this.state;
    const { homeClick, homeClickAction } = this.props;
    return (
      loading ? <div>loading...</div> : <Home />
    );
  }
}

// NOTE: for state.reducer.var
const mapStateToProps = state => {
    return {
        homeClick: state.homeReducer.homeClick
    }
}

// const var
// dispatch
// return
// key
// data => { fire(actionCreator(data)) }
const mapDispatchToProps = dispatch => {
    return {
        homeClickAction: data => {
            dispatch(homeClickAction(data))
        }
    }
}

const HomeContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(HomeCombined);

export default HomeContainer;

容器中可以有本地州吗？

1 个答案: