Можно ли иметь местные штаты в контейнере?

Question

Вот полный код .

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, не проходя через приставку?

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;