react开发教程（十）redux结合react

摘要：描述和之间没有关系。但是还是比较适合和搭配的，因为允许你以的形式来描述界面，而非常擅长控制的变化。应用中应有且仅有一个。只需要在渲染根组件时使用即可。创建上一篇开发教程九基础

Redux 和 React 之间没有关系。Redux 可以搭配 React、Angular 甚至纯 JS。但是 Redux 还是比较适合和 React 搭配的，因为 React 允许你以 state 的形式来描述界面，而 Redux 非常擅长控制 state 的变化。

Redux 和 React 的结合需要用到 redux-react 这个库

├── README.md
├── index.js
├── action
│   └── home.js
│   └── about.js
├── actionType
│   ├── index.js
├── reducer
│   └── home.js
│   └── about.js
│   └── index.js
└── view
    └── Home.jsx
    └── About.jsx

抛出两个type常量

export const SET_AGE = "SET_AGE"
export const SET_NAME = "SET_NAME"

创建动作

//home.js
import {SET_NAME, SET_AGE} from "../actionType"

export function set_age (age) {
  return {
    type: SET_AGE,
    age
  }
}

export function set_name (name) {
  return {
    type: SET_AGE,
    name
  }
}

//about.js同上，就是一个模拟，可以写不同的数据

//reducer/home.js

import {SET_NAME, SET_AGE} from "../ActionType"

const initialState = {
  name: "刘宇",
  age: 100
}

export default (state = initialState, action) => {
  switch (action.type) {
    case SET_NAME:
      return Object.assign({}, state, {
        name: action.name
      })
    case SET_AGE:
      return Object.assign({}, state, {
        age: action.age
      })
    default:
      return state
  }
}

//reducer/about.js   同上写法可自定义

//reducer/index.js
import {combineReducers} from "redux"
import home from "./home"
import about from "./about"

export default combineReducers(
  {
    home,
    about
  }
)

bindActionCreators：把 action creators 转成拥有同名 keys 的对象，但使用 dispatch 把每个 action creator 包围起来，这样可以直接调用它们。
connect：连接 React 组件与 Redux store。

import React, { Component } from "react";
import * as pageActions from "../../action"
import {bindActionCreators} from "redux"
import {connect} from "react-redux"

class Inbox extends Component {
  constructor (props) {
    super(props)
    console.log(this.props)
  }

  render() {
    return (
      

        index
      
    )
  }
}

function mapStateToProps(state) {
  return {
      pageState: state.home
  }
}

function mapDispatchToProps(dispatch) {
  return {
    pageActions: bindActionCreators(pageActions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Inbox)

// export default Inbox;

将react和redux结合
createStore：创建一个 Redux store 来以存放应用中所有的 state。应用中应有且仅有一个 store。 
 ：是由 React Redux 提供的高阶组件，用来让你将 Redux 绑定到 React，让所有容器组件都可以访问 store，而不必显示地传递它。只需要在渲染根组件时使用即可。

import React from "react";
import ReactDOM from "react-dom";
import {createStore} from "redux"

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect
} from "react-router-dom"
import {Provider} from "react-redux"

import Home from "./view/Inbox"
import About from "./view/About"
import rootReducer from "./Reducer"

//创建store
const store = createStore(rootReducer)

const BasicExample = () => (
  
    

      
        
        
      
    
  
)

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

上一篇：react开发教程（九）redux基础