react-redux的使用

1. 下载依赖

npm install --save react-redux

2. 在src目录下创建store文件夹
3. store下新建index.js文件

import { createStore, combineReducers } from 'redux'
import Listcounter from './reducer'
import userReducer from '../reducers/user'
const rootReducer = combineReducers({
  Listcounter,
  userReducer
})
const store = createStore(rootReducer)
export default store

4. reducers文件夹下面新建user.js文件

import { Add_user } from '../constans'
import { add, sub, chengyi, chuyi} from '../store/reduceType'
const defaultState = {
  userValue: 'userValue666',
  num: 0
}

// eslint-disable-next-line import/no-anonymous-default-export
export default (state = defaultState, action) => {
  let newState = JSON.parse(JSON.stringify(state))
  switch(action.type) {
    case Add_user:
      return state.push('awen')
    case add:
       newState.num += 1
       return newState
    case sub:
       newState.num -= 1
       return newState
    case chengyi:
      newState.num *= 10
       return newState
    case chuyi:
       newState.num /= 10
       return newState
     default:
        return newState
  }
}

5. 之后去App.jsx文件，对里面的东西进行修改、

import React  from "react";
import { Todolist, User } from './components'
import { Provider } from 'react-redux'
import store from './store'
const App = () => {
  return (
    <div>
      {/*  提供器 */}
      <Provider store={ store }>
        <Todolist></Todolist>
        <User></User>
      </Provider>
    </div>
  )
}

export default App

7. 在src文件夹下面新建constance这个文件夹，下面新建文件index.js用于存放一些变量

export const Add_user = "Add_user"

8. 在src文件夹下面新建action这个文件夹，下面新建文件index.js用于存放一些函数

import { Add_user } from '../constans/index'
export default () =>  {
   return {
     type: Add_user
   }
}
const addClick = type => ({type})
const subClick = type => ({type})
const chengyu = type => ({type})
const chu = type => ({type})
export {
  addClick,
  subClick,
  chengyu,
  chu
}

9. 在页面中使用

import React from "react";
import { connect } from 'react-redux'
import { addClick, subClick, chengyu, chu } from '../actions/user'
import { add, sub, chengyi, chuyi } from '../store/reduceType'
const User = (props) => {
  return (
    <>
     <div>{ props.inputValue }</div>
     <div>{props.num}</div>
     <button onClick={ props.addClick}>+1</button>
     <button onClick={props.subClick}>-1</button>
     <button onClick = {props.chengyu}>*10</button>
     <button onClick={props.chu}>/10</button>
    </>
  )
}
const stateToProps = (state) => {
  return {
    inputValue: state.userReducer.userValue,
    num: state.userReducer.num
  }
}
const dispatchToProps = (dispatch) => {
  return {
    addClick() {
      dispatch(addClick(add))
    },
    subClick () {
      dispatch(subClick(sub))
    },
    chengyu () {
      dispatch(chengyu(chengyi))
    },
    chu () {
      dispatch(chu(chuyi))
    }
  }
}
export default  connect(stateToProps, dispatchToProps)(User)