react 中 redux-白红宇

react 中 redux

阅读量：2120 次

发布时间：2019-04-30

本文共 2286 字，大约阅读时间需要 7 分钟。

本文通过一个实例来说明redux 的使用方法及流程：

实现内容：1.拿store中的state的数据显示title 2.调用dispatch 方法，修改state里面的内容.

创建store文件夹，文件夹内创建（index.js，reducer.js，action.js）,

1.index.js

import {createStore,applyMiddleware} from 'redux'import userReducer from './reducer'import thunk from 'redux-thunk'//创建store单一数据源，整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。let store = createStore(    userReducer,    applyMiddleware(thunk)  )  export default store

2.reducer.js

//默认statelet defaultState = {    title: 'hello world'}export default (state = defaultState, action = {})=>{    //reducer通过action的type，进行处理返回新的state    if(action.type === 'set_title'){        return Object.assign({},{title:action.value})    }    return state;}

3.action.js

//每个action 必须有一个 type ，从而标注需要做什么操作export const setTitle = (title)=>{    return{        type: 'set_title',        value: title    }}

4.视图层，调用store中的state和action，修改页面显示内容

import React from 'react';import {connect} from 'react-redux';import {setTitle} from './action'class Header extends React.Component{    render(h) {        return(                        
                   
     {this.props.title}                 
                
   
        )    }}//获取store中state里面的值，赋值给当前视图所需元素const mapStateToProps=(state) => {    return {       //当前title 等于store中state的title        title: state.title    }}//dispatch调用action方法，触发reducer从而返回新的state,state更新const mapDispatchToProps=(dispatch) =>{    return {        setTitle: (title)=> dispatch(setTitle(title))    }}//通过connect连接store和视图export default connect(()=>mapStateToProps,mapDispatchToProps)(Header);

5.必须要在外层Provider，才可以使store在视图呢共享从而使用

1.在App.js 内引入Provider，2 <Provider store={store}></Provider>

App.jsimport React, { Component } from 'react';import { Route,HashRouter } from 'react-router-dom';import './App.css';import routes from './route/route.js';import {Provider} from 'react-redux';import store from './store'class App extends Component {  render() {    return (      
   
          //中间是路由可以去掉      
            
     
              {              routes.map((route,key)=>{                return 
      
        (                  
                       )}                />              })            }                    
      
     
      
          
       );  }}export default App;