react学习之redux和redux-react用法

 

前言

redux和react-redux的关系：
  redux就是一个存储数据的对象，并提供了获取/设置store中的属性的解决方案，react-redux是连接react和redux桥梁的封装。

使用

0.目录结构
  未标明[type=dir]就是文件，否则是文件夹

|__package.json
   src
   |____
        _redux [type=dir]
        components [type=dir]
          |____
               Header.js
               Main.js
               ThemeSwitch.js
        store [type=dir]
        App.js
        index.js

1.由于版本问题有时候会引来大坑，所以贴一下版本号
  package.json

{
  "name": "mydemo3",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

  index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { Provider } from 'react-redux'  //从react-redux中取出包裹层组件
import store from './store/store'  //取出初始化的store文件

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

registerServiceWorker();

App.js

import React, { Component } from 'react'
import Header from './components/Header'
import Content from './components/Main'
import './index.css'

class App extends Component {
  render () {
    return (
      <div>
        <Header />
        <Content />
      </div>
    )
  }
}

export default App

reducer.js

export const themeReducer = (state, action) => {
  if (!state) return {
    themeColor: 'red'
  }
  switch (action.type) {
    case 'CHANGE_COLOR':
      return { ...state, themeColor: action.themeColor }
    default:
      return state
  }
}

store.js

import { createStore } from 'redux'
import { themeReducer } from './reducer'

const store = createStore(themeReducer)

export default store

Header.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Header extends Component {
  render () {
    return (
      <h1 style={{ color: this.props.themeColor }}>this is header</h1>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    themeColor: state.themeColor
  }
}

Header = connect(mapStateToProps)(Header)

export default Header

Main.js

import React, { Component } from 'react'
import ThemeSwitch from './ThemeSwitch'
import { connect } from 'react-redux'

class Content extends Component {
  constructor () {
    super()
    this.state = { themeColor: '' }
  }

  render () {
    return (
      <div>
        <p style={{ color: this.props.themeColor }}>this is content</p>
        <ThemeSwitch />
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    themeColor: state.themeColor
  }
}

Content = connect(mapStateToProps)(Content)

export default Content

ThemeSwitch .js

import React, { Component } from 'react'
import { connect } from 'react-redux'

class ThemeSwitch extends Component {
  constructor () {
    super()
    this.state = { themeColor: '' }
  }

  // dispatch action 去改变颜色
  handleSwitchColor = (color) => {
    if (this.props.onSwitchColor) {
      this.props.onSwitchColor(color)
    }
  }

  render () {
    return (
      <div>
        <button
          style={{ color: this.props.themeColor }}
          onClick={()=>{ this.handleSwitchColor('green') }}>Red</button>
        <button
          style={{ color: this.props.themeColor }}
          onClick={()=>{ this.handleSwitchColor('blue') }}>Blue</button>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    themeColor: state.themeColor
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onSwitchColor: (color) => {
      dispatch({ type: 'CHANGE_COLOR', themeColor: color })
    }
  }
}

ThemeSwitch = connect(mapStateToProps, mapDispatchToProps)(ThemeSwitch)

export default ThemeSwitch

主要的几点：
1、index.js中：
  import { Provider } from 'react-redux'这里要从redux中引入，而不是redux中引入。
  <Provider store={store}><App /> </Provider>'这里要把store传入组件Provider，然后必须把App组件放入其中。

2、store/store.js中：
  主要是为了初始化redux。

3、connect
  是将：store的指定属性、方法注入到组件的this.props中去。

实例地址：
https://github.com/wenwenwei/learn-project/tree/master/react-redux

想要更深入理解reudx可以参考文章：
https://segmentfault.com/a/1190000012976767#articleHeader14