react-redux简单使用

在react中使用redux

安装 React Redux
Redux 默认并不包含 React 绑定库，需要单独安装。

npm install --save redux
npm install --save react-redux

使用

• 简单目录结构

- src
    - reduxs
        - index.js
    - app.js
    - index.js

 

准备容器组件

// /reduxs/index
import {
    createStore
} from 'redux';
var stater={
    uid:''
}
const counter = (state=stater, action) => {
  switch (action.type) {
    case "SETNAME":
      return {...state,
              uid:action.uid};
    default: return state
  }
};

const store = createStore(counter)  //创建包含指定 reducer 的 store 对象
export default store;

 

创建容器之后，我这里是做全局引入, 使用<Provider> 来 让所有容器组件都可以访问 容器

// /index
import React from "react";
import ReactDOM from "react-dom";
import App from "./app.js";
import { Provider } from "react-redux";
import store from "./redux/index.js";

ReactDOM.render(
  <Provider store={store}>  //这里做全局引入
    <App />
  </Provider>,
  document.getElementById("root")
);

 

到这里我们子组件要访问容器,我们需要将要访问容器的组件使用connect将其什为高阶组件这样我们的组件就能访问容器了

import { connect } from "react-redux";
...
...
export default connect(state => {
    return state;
  })(App);

 

关于connect的参数，这里我只使用了第一个参数，其他参数使用可参考官方文档，第一个参数是一个回调，需要传入一个参数，而我的代码就是直接将容器的state返回到props，而我们想要修改容器state的值，就需要用到dispatch来触发action修改
这里直接打印this

我们可以看到props有dispath方法,还有我们容器state的uid。

操作获取和修改

this.props.dispatch({ type: 'SETNAME',uid:'111' })
console.log(this.props.uid);

 

在学习过程，我们会发现一个问题，在我们组件经过connect什级后，我们打印this的结果大家在上面也看到了，那么现在我给你们看看在没经过connect之前打印是怎样的

没错，我们会发现history之类的经过connect之后都消失了，那么如果我们想要使用history时那该怎么弄，话不多说，看代码

import { withRouter } from "react-router-dom";

export default withRouter(
  connect(state => {
    return state;
  })(App)
);

 

看看结果

问题解决

关于react-redux就到这了，学习过程的一些总结，内容比较浅显，有些地方说的不好的话或有问题的话，初学者愿意接受指点