react-redux使用

安装

tnpm install -S react-redux
// 引入createStore的作用
tnpm install --s redux

store的创建

目录结构

store的目录结构

index.js

import {createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

reducer/index.js

import {CHANGE_DATA, CHANGE_NAME} from '../actions/actionType'

const initialData = {
  user: {
    id: 1,
    name: 'haiyang',
    company: '云知道',
    work: 'php',
    pic: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600961220628&di=0365e8569849a27c577d77c38090ec18&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F00%2F38%2F01300000241358127660380294217.jpg'
  },
  data: 'userinfo'
}

export default function (state = initialData, action) {
  console.log(state, action)
  switch (action.type) {
    case 'CHANGE_DATA':
      return {
        ...state,
        data: action.value
      }
      break;
    case 'CHANGE_NAME':
      return {
        ...state,
        user: {
          ...state.user,
          name: action.value
        }
      }
      break;
    default:
    return state
  }
}

actions/index.js

import {CHANGE_NAME, CHANGE_DATA} from './actionType'

export const changeData = (value) => {
  return {
    type: CHANGE_DATA,
    value
  }
}

export const changeName = value => {
  return {
    type: CHANGE_NAME,
    value
  }
}

actions/actionTypes.js

export const CHANGE_DATA = 'CHANGE_DATA'
export const CHANGE_NAME = 'CHANGE_NAME'

store的使用

store要在最顶层使用，这样下面的每个组件才能使用和修改store里面的值

引入store

我是在路由开始引入

import React from 'react'
import {HashRouter, Route, Switch} from 'react-router-dom'
import Home from '@/pages/Home'
// 引入Provider
import {Provider} from 'react-redux'
// 引入store
import store from './store'

function App() {
  return (
    <Provider store={store}>
      <HashRouter>
        <Switch>
          <Route exact component={Home} />
        </Switch>
      </HashRouter>
    </Provider>
  );
}

export default App

此时下面的组件是可以获取到store里面的值了

store值的获取和修改

import React from 'react'
import {connect} from 'react-redux'
import {changeData, changeName} from '@/store/actions'

function Home(props)
{
  // 这里是把store的值，并入到props的里面
  // 如果是class组件，就是this.props
  console.log(props)
  return (
    <div>
      store里的data属性：{props.data.data}
      <br />
      store里的用户的名字：{props.data.user.name}
      <br />
      <button onClick={props.changeNowData}>
        改变data的值
      </button>
      <button onClick={props.changeNowName}>
        改变user-name的值
      </button>
    </div>
  )
}

const stateToProps = state => {
  // store里的值, 这里是读取store的值给当前组件的props里
  // console.log(state)
  return {
    data: state
  }
}

// 改变store的数据
const dispatchToProps = dispatch => {
  // changeNowData、changeNowName会加在当前的props里，然后diapatch去改变store的数据
  return {
    changeNowData(e) {
      dispatch(changeData('改变data的数据'))
    },
    changeNowName(e) {
      dispatch(changeName('改变user-name的数据'))
    }
  }
}

export default connect(stateToProps, dispatchToProps)(Home)

打印结果

初始化的props和store

初始化的props

store初始化未有修改时

一个改变store值流程