首先我们要去安装关于redux的命令如下：

cnpm i redux react-redux redux-promise redux-thunk redux-persist -S

在src中创建一个store.js文件！！在这个项目中这个创建的文件只能有一个！！

代码如下：

import { createStore, compose, combineReducers, applyMiddleware } from ‘redux’
import promise from ‘redux-promise’
import thunk from ‘redux-thunk’

//一下两个是引入的reducer中的文件用来往redux里存数据的
import home from ‘@/reducer/home’
import login from ‘@/reducer/login’

const composeEnhancers = window.REDUX_DEVTOOLS_EXTENSION_COMPOSE || compose

const store = createStore(
combineReducers({
home,
login,
}),
composeEnhancers( applyMiddleware( promise, thunk))
)

export default store

我们弄一个静态的classname名字

设置一个constants文件夹中有一个actionsTypes.js文件

以下代码：：
//抛出各种类名
//Home

export const SET_HOME_NAME = ‘SET_HOME_NAME’;
export const SET_HOME_DATA = ‘SET_HOME_DATA’;

//Login

export const SET_LOGIN_NAME = ‘SET_LOGIN_NAME’;
export const SET_LOGIN_DATA = ‘SET_LOGIN_DATA’;

接下来我们要去src文件夹创建reducer文件夹

有几个页面就创建几个js文件

例如你有一个home页面那么就创建一个home.js文件

文件代码如下：

//引入ClassName静态变量命
import { SET_HOME_NAME, SET_HOME_DATA } from ‘@/constants/actionsTypes.js’;

//定义 redux 数据
const defaultStatus = {
name: ‘小花’,
data: [],
}

export default function homeReduce (state = defaultStatus,action) {
switch (action.type) {
case SET_HOME_NAME:
return { …state, name:action.payload }

    case SET_HOME_DATA:
        return { ...state, data:action.payload }
    
    default:
        return state
}

}

在从src文件夹创建一个actions文件夹

和上面一样有几个页面就创建几个
例如还是有home页面
创建一个home.js文件

代码如下：：

//修改 name
export function setName (opt) {
return {
type: ‘SET_HOME_NAME’,
payload: opt,
}
}

//修改 data

export function setData (opt) {
return {
type: ‘SET_HOME_DATA’,
payload: opt,
}
}

最后我们就从src文件夹中的index.js引入 redux

import React from ‘react’;
import ReactDOM from ‘react-dom’;

//以下主要
import { Provider } from ‘react-redux’
//引入store.js 文件
import store from ‘./store’
//以下是引入路由
import Router from ‘./router’
//使用less也可以用less 中3.0的版本
//git 命令中就是安装以下两个
/*
“less”: “^3.11.1”,
“less-loader”: “^5.0.0”,
*/
import ‘./styles/index.less’

ReactDOM.render(
//包起来
<Provider store={ store }>

,
document.getElementById(‘root’)
);

以下就是在页面中使用了
例如有一个 home页面

import React, { Component } from ‘react’
import { connect } from ‘react-redux’
//引入修改的方法
import { setName, setData } from ‘@/actions/home’

//挂载到props中
export default @connect(state => {
return {
name:state.home.name,
data:state.home.data
}
},{
//两个修改方法
setName,
setData,
})

class Home extends React.Component {
//点击事件修改redux中的数据
onClick = () => {
this.props.setName(‘你好’)
}
render() {
const { name, data } = this.props
return (

{name}

<button onClick={
this.onClick
}>setName

)
}
}

React 中关于同步redux的相关配置

{name}

猜你喜欢