关于redux结合react的使用， 你了解多少？

什么都不说了，直接开用！

安装项目 配置环境

$ npx create-react-app redux-demo
$ npm i redux react-redux redux-thunk -S

这两步是安装一个 react项目 并把在redux 使用过程中用到的插件安装下来

基本原理

store：

将状态及更新状态的行为合并在一起，方便实现状态维护

state：

数据，驱动应用运行的数据

action：

action 就是一个普通 JavaScript 对象，表示要更新 state 时的行为说明，通常有 type 和 payload 属性，type 表示 action 类型，payload 表示有效载荷

reducer：

是一个纯函数，用于将 state 与 action 关联，在 reducer 中实现状态更新的操作，注意，在 reducer 中通常返回更新后的新的 state 对象，不要在原来的 state 上直接修改

dispatch：

要想更新 state 中的数据，你需要发起一个 action，dispatch 就是发起 action 的函数，会在 dispatch 函数内部调用到 reducer 函数（调用 reducer 函数时，传递 state 与 action 参数）

配置目录结构

将原来的 src 目录清空

自己重新写入目录文件
下面这个文件目录结构说我要用到的文件和目录，展开的都是需要用到的

使用redux 的三个目录

• actions
• reducers
• store

创建reducer

先从reducer 开始 来使用 redux

reducer 是 纯函数，根据动作类型判断如何更新状态，会返回更新后的新状态值

vs code 有个插件 叫做 ES7 React/Redux/GraphQL/React-Native snippets 可以快速创建 reducer 函数

vs 里 输入 rxr 就会出现提示

这里我 用一个 登录用户的状态当作 demo

在 reducers 里 创建一个 user.js 文件写入以下代码

import { USER_LOGIN, USER_LOGOUT } from "../actions/user" // actions 里引入过来的动作类型

// 默认 state 值
const initialState = {
  username: '',
  isLogin: false
}

// 默认导出 动作类型 type 一般都是全部大写便于区分 参数 是 action里函数 调用 dispatch({type, payload }) 传递过来的
export default (state = initialState, { type, payload }) => {
  switch (type) {
      case USER_LOGIN: // 登录 将登录信息 返回给state
        return payload // 返回的是一个新的 state 替代上一个
      case USER_LOGOUT: // 退出登录 恢复默认值
        return {
          username: '',
          isLogin: false
        }
      default:
        return state
   }
}

在reducers 文件夹里创建一个index.js文件，用来做所有reducer 的合并

// 合并reducer redux提供的方法
import { combineReducers } from 'redux'
import userReducer from './user'

// combineReducers 里 传递的是一个对象， 每一个属性代表一个reducer
export default combineReducers({
  user: userReducer
})

上面代码引入了 actions 里的 代码， 那么我们去actions 里写入我们的 动作 和 携带的数据

创建action

用于生成在 reducer() 函数中第二个参数 action 对象的函数

这里会将动作类型 载荷 传递过来

在函数内部 调用 dispatch 这个函数发送 动作类型和载荷

在actions 里 创建 一个 user.js 文件

// 暴露 两个常量 表示 动作类型
export const USER_LOGIN = 'USER_LOGIN' 
export const USER_LOGOUT = 'USER_LOGOUT'

// user 的 action 提交 数据到 reducer 等待处理

// login 登录所携带的参数
export const loginAction = ({ username, password }) => dispatch => {
  // 用 定时器 来模拟异步请求ajax这类的数据请求 
  setTimeout(() => {
    dispatch({
      type: USER_LOGIN,
      payload: {
        isLogin: true,
        username,
        password
      }
    })
  }, 1000)
}

// 退出登录 
export const logoutAction = ( username ) => dispatch => {
  setTimeout(() => {
    dispatch({
      type: USER_LOGIN,
      payload: {
        isLogin: true,
        username
      }
    })
  }, 1000)
}

现在 reducer 和 action 都写好了，该去完成store 将 状态及更新状态的行为合并在一起

创建store

store里创建一个index.js 代码如下：

// 创建一个 store  redux 提供的方法createStore 
// 如果有异步加载方法applyMiddleware 需要thunk做参数
import { createStore, applyMiddleware } from 'redux'
import rootRedcer from '../reducers' // 引入 reducer
import thunk  from 'redux-thunk'

export default createStore(rootRedcer, applyMiddleware(thunk))

好了，现在 一个 关于 全局状态就已经 配置好了 ， 现在该去使用它了

挂载共享 在 src 下的 index.js 里

怎么使用它呢？

还记得之前安装的插件 react-redux 吗？ 这个是将 store 里 存的 state 通过 全局上下文的方式共享出去

封装了 一个高阶组件使用，我们去引入就是

Provider 挂载 共享状态数据 （用在顶层组件，包裹需要使用数据的组件）

connect 连接，使用改变状态数据 （子组件）

在index.js 写入代码

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux' // 引入 组件 共享 store
import store from './store' // 引入状态 
import App from './App'
//  store={store} 当作属性挂载在组件 其他组件使用 this.props 调用
render(
  <Provider store={store} > 
    <App />
  </Provider>,
  document.getElementById('root')
)

使用 store 的 状态数据和方法

数据已经共享出去了，现在我们去一个组件使用它

**在App.js 里使用 代码如下： **

import React, { Component } from 'react'
import { connect } from 'react-redux' // 引入高阶组件
import { loginAction } from './actions/user' // 引入登录 的 action 函数
export class App extends Component {
    // 打印一下 this.props ,查看 是否传递到组件属性上
  componentDidMount() {
    console.log(this.props)
  }
    // ES7语法 箭头函数 不然 不能使用 this
  login = () => {
    console.log('login')
      // 调用 传过来的函数
    this.props.loginAction({
      username: 'hello',
      password: '123456'
    })
  }
  render() {
    return (
      <div>
        app
        <button onClick={ this.login }>登录</button>
        <p>{ this.props.user.username ? this.props.user.username : '没有用户名' }</p>
      </div>
    )
  }
}
// 这是 state 因为合并了 reducer 所以要用谁，就把它 点出来
const mapStateToProps = state => ({
  user: state.user
})
// 发起改变状态的函数 在action 里已经定义好了 ， 直接导入 
const mapDispatchToProps = {
  loginAction
}
//  connect 使用 返回的返回值为 HOC 函数 再调用 传入需要的组件 ，返回一个组件 
export default connect(mapStateToProps, mapDispatchToProps)(App)

查看最终结果

点击登录按钮前

点击登录按钮后

以上就是redux 结合 react 的大致使用方法了，希望大家都能轻松驾驭，敲代码得心应手