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

Redux

react学习之redux和redux-react用法

前言

使用