使用webpack 搭建React 项目（三）- redux

前文回顾

前一篇文章主要介绍在react中引入样式和图片，需要增加哪些配置，本篇主要介绍在react中引入redux

 

简要描述

redux的核心思想是将状态统一维护，这样解决了控件之间通信的问题。

 

添加引用

# redux

npm install --save react-redux redux redux-thunk

# redux-logger

npm install --save-dev redux-logger

 

添加文件

constants文件夹下添actionTypes.js

export const DIV_TOGGLE = 'DIV_TOGGLE'

 

action文件夹下添加index.js

import * as actionType from '../constants/actionTypes'
export const divToggle = () => ({
    type: actionType.DIV_TOGGLE
})

 

reducers文件夹下添加index.js

import * as actionType from '../constants/actionTypes'

const store = (state = { isShow: false }, action) => {
  switch (action.type) {
    case actionType.DIV_TOGGLE:
      return {
        ...state,
        isShow: !state.isShow
      }
    default:
      return state
  }
}


export default store

 

components文件夹下添加MyButton.js、MyImage.js

import React from 'react';
import { connect } from 'react-redux';
import { divToggle } from '../action/index'

class MyButton extends React.Component {
  render() {
    let { divToggle } = this.props
    return (
      <button onClick={divToggle}>切换图片显示</button>
    );
  }
}

//定义属性
const mapStateToProps = state => {
  return {
  }
}

//定义事件
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    // 订单提交
    divToggle: (e) => {
      dispatch(divToggle())
    }
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(MyButton)

import React from 'react';
import { connect } from 'react-redux';

import img from '../styles/images/bg.png'

class MyImage extends React.Component {
  render() {
    let { state } = this.props
    return (
        <img src={img} style={{ display: state.isShow ? '' : 'none' }} />
    );
  }
}

//定义属性
const mapStateToProps = state => {
  return {
    state
  }
}

export default connect(mapStateToProps)(MyImage)

 

pages文件夹下添加home.js

import React from 'react';
import MyImage from '../components/MyImage'
import MyButton from '../components/MyButton'

class Home extends React.Component {
  render() {
    return (
      <div>
        <MyButton></MyButton>
        <div>
          <MyImage />
        </div>
      </div>
    );
  }
}

export default Home

 

修改index.js

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { createLogger } from 'redux-logger'
import thunk from 'redux-thunk'
import reducer from './reducers/index'


import Home from './pages/home'

const middleware = [ thunk ];
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger());
}

const store = createStore(
  reducer,
  applyMiddleware(...middleware)
)

render(
  <Provider store={store}>
    <Home />
  </Provider>,
  document.getElementById('root')
)