react-redux 个人基本配置+使用心得

Redux  个人心得

第一步：

 

在index.js 里面

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import configureStore from './store/configureStore'

 这个文件里面其实是配置 数据store

导出的其实是一个函数

 

 

import Hello from './containers/Hello' 引入组件
const store = configureStore() 

因为导出的是函数所以加括号（）
render(
    <Provider store={store}>
        <Hello/>  引用上面的组件
    </Provider>,
    document.getElementById('root')
)

 

 

 

 

 

第二步：  打开store配置文件

 

import configureStore from './store/configureStore'

找到并且打开这个文件 配置store的文件

 

    ⬇ ⬇ ⬇

import { createStore } from 'redux'
import { combineReducers } from 'redux'  数据集合

import userinfo from './userinfo'  用户信息的数据

const rootReducer = combineReducers({
    userinfo  这里是数据集

Use2，user3....
})

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState)
                          上面的数据集规则

return store
}

 

⬇ ⬇ ⬇

 

  

 

import userinfo from './userinfo'  

接着 分析下，打开这个用户数据 规则

 

⬇ ⬇ ⬇

const initialState = {}  定义所有的初始化状态在这里
例如：用户信息数据，管理员数据...轮播数据
export default function userinfo(state = initialState, action) {
    switch (action.type) {
        // 登录
        case actionTypes.USERINFO_LOGIN:
            return action.data

        // 修改城市
        case actionTypes.UPDATE_CITYNAME:
            return action.data

        default:
            return state 默认初始化的值 其实就是json
    }
}

 

最后打开 hello组件

import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
用户数据集的actions 方法函数
import * as userinfoActions from '../actions/userinfo'  得到的是一个对象方法 userinfoActions.abc  这样的

import A from '../components/A'
import B from '../components/B'
import C from '../components/C'

class Hello extends React.Component {
    render() {
        return (
            <div>
                <p>hello world</p>
                <hr/>

4.从mapStateToProps 映射过来的了
                <A userinfo={this.props.userinfo}/>
                <hr/>
                <B userinfo={this.props.userinfo}/>
                <hr/>
                <C actions={this.props.userinfoActions}/>
            </div>
        )
    }

5.生命周期函数，加载完成的时候触发函数

传的一个json 过去 action方法集合的login
    componentDidMount() {
        // 模拟登陆
        this.props.userinfoActions.login({
            userid: 'abc',
            city: 'beijing'
        })
    }
}

function mapStateToProps(state) {
    return {
        userinfo: state.userinfo  

3.从store获取的userinfo，store配置文件的数据集来的
   然后hello组件就可以通过 this.props.userinfo获取

combineReducers 里面的userinfo就是上面的state.***

 }
}

7. userinfoActions是action方法里面的
function mapDispatchToProps(dispatch) {
    return {
        userinfoActions: bindActionCreators(userinfoActions, dispatch)
    }
}

export default connect(
    mapStateToProps, 1. 把props属性值塞到 hello组件里
    mapDispatchToProps  
)(Hello)  2. 然后这个hello组件就可以获取 store数据

 

⬇ ⬇ ⬇

 

 

打开action方法，其实就是一堆函数方法

 

export function login(data) {
    return {
        type: actionTypes.USERINFO_LOGIN,
        data  这个data就是传过来的json数据
    }
}

只要触发了action方法就会改变数据 发送给计算规则

就是userinfo，传的对象，json action.type

然后执行mapStateToProps(state)映射，就显示了

export function updateCityName(data) {
    return {
        type: actionTypes.UPDATE_CITYNAME,
        data
    }
}

 

                                                        会点php的前端小渣渣

                                                      2018、4、12