快速入门 redux | react-redux -只讲操作不讲理论

快速入门redux -只讲操作不讲理论

前言: 

    最近很多师弟师妹跑过来问我 , redux好难学啊 看了那么多文章 视频什么的还是搞不懂 . 想想我刚开始学的时候也是看了大量的文章 懂了 好像又不懂的状态, 后来工作中要用到了,写得多了 其实也就那么一回事. 无非就是一开始 单词太多了 记不住. 还有里面的一些专业术语和 api . 说多都是泪.如果你看到了我这篇文章 证明你已经看了很多文章了 但是还是搞不懂redux. 这次我就不讲理论了.直接开干代码. 等你工作了 也基本是这样用 用多了你就懂为什么要用它了.

     现在你先这么理解 就是把所有的数据都放到一个容器里面统一管理 那个容器就像一棵树 有着各种数据 各种状态. 然后你react里面的组件就是通过特定的方式去拿容器里的 数据&状态 渲染到页面上 然后你想更新的时候 也是通过特殊的方式来更新容器里的 数据&状态 ,然后只要这个组件更新了 其他的组件也会跟着更新就对了.

接下来我们直接撸代码了

理论: 参考阮大神的博客 :http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

redux 入门

1. 搭建好 node 环境

2. 打开终端 随便进入你喜欢的工作目录 运行:

  npm install -g create-react-app

3. 创建react 简易脚手架 运行:  create-react-app  redux-demo1

4. 打开 redux-demo 

你会得到如下目录

删除src下多余的东西  只剩下

5. 进入正题 下载redux: npm i redux -S

6. src 目录下新建 reducer/index.js

// 这个文件是创建reducer函数的, 专门用来处理 发送过来的ction
const initState = {
  value: "默认值",

};
const reducer = (state = initState, action) => {
  console.log("打印啦", state, action)
  switch (action.type) {
    case "send_type":
      return Object.assign({}, state, action)
    default:
      return state
  }
};

module.exports = {
  reducer
}

7. src 目录下 新建store/index.js

// 引入redux
import { createStore } from 'redux'

// 导入我们创建的 reducer
import { reducer } from '../reducer'
const store = createStore(reducer);

export default store;

8. src 目录下 新建 action/index.js

// 这是一个action 的构建函数

const sendAction = () => {
  // 我们需要返回一个action对象
  return {
    type: "send_type",
    value: "我是一个action"
  }
}
module.exports = {
  sendAction
}

9. src 目录下 新建 page/home/index.js 组件

import React from 'react';
// 导入store
import store from '../../store'
// 导入 action
import { sendAction } from '../../action'

export default class Home extends React.Component {
  // 点击事件
  handleClick = () => {
    const action = sendAction()
    store.dispatch(action)
  };
  // 当组件一加载完毕 来监听
  componentDidMount() {
    store.subscribe(() => {
      console.log("subscribe:", store.getState())
      this.setState({})
    })
  }
  render() {
    return (
      <>
        <button onClick={this.handleClick}>点我,发送一个action</button>
        <div>{store.getState().value}</div>
      </>
    )
  }
}

10. 修改 App.js

import React from 'react';
import Home from './page/home'

function App() {
  return (
    <div className="App">
      <Home></Home>
    </div>
  );
}

export default App;

11. 修改 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

最终

然后 npm start 就会得到一个最简单的redux 应用

好了 我们入门redux了 但是我们一般工作中用的是 react项目 是结合react-redux 来用的 

react-redux

这次不同了 我们写两个兄弟组件 一个组件直接修改另一个组件的数据

1. 创建一个建议的脚手架:

 create-react-app  react-redux-demo1 

2. 根据redux-demo1 一样 删除多余的东西 .

3. 下载redux 和react-redux 

     npm i redux -S

     npm i react-redux -S

4. src目录下 新建reducer/index.js

const initState = {
  count: 0
}

exports.reducer = (state = initState, action) => {
  switch (action.type) {
    case "ADD_ACTION":
      return {
        count: state.count + 1
      }
    case "DEL_ACTION":
      return {
        count: state.count - 1
      }
    default:
      return state
  }
}

5. src目录下新建 store/index.js

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

export default createStore(reducer)

6. src 目录下 新建 components/ComA/index.js 与components/ComB/index.js

import React from 'react'
import { connect } from 'react-redux'

class ComA extends React.Component {
  constructor(props) {
    super(props)
  }
  handleClickAdd = () => {
    // 发送action
    this.props.add()
  }
  handleClickDel = () => {
    // 发送action
    this.props.del()
  }
  render() {
    return (
      <>
        <button onClick={this.handleClickAdd}> + </button>
        <button onClick={this.handleClickDel}> - </button>
      </>
    )
  }
}
/**
 * 这个是函数需要有一个返回值 这个返回值是一个对象
*/
const mapDispatchToProps = (dispatch) => {
  return {
    // 利用dispatch发送一个action
    // 传递action 对象 我们要去定义一个type属性
    add: () => {
      dispatch({
        type: "ADD_ACTION"
      })
    },
    del: () => {
      dispatch({
        type: "DEL_ACTION"
      })
    }
  }
}
// A是发送方 所以要实现 第二个参数
export default connect(null, mapDispatchToProps)(ComA) 

import React from 'react'
import { connect } from 'react-redux'


class ComB extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>{this.props.count}</div>
    )
  }
}
/**
 * 接收的是两个参数
*/
const mapStateToProps = (state) => {
  return state
}
// B 组件是属于接收方 实现第一个参数
export default connect(mapStateToProps)(ComB)

7. 修改App.js

import React from 'react';
import './App.css';

import { Provider } from 'react-redux';
import store from './store'

import ComA from './components/ComA';
import ComB from './components/ComB';

function App() {
  return (
    // 注意这里 这里用了react-redux的一个组件 然后吧store 传进去了
    <Provider store={store}>
      <div className="App">
        <div>
          <ComA></ComA>
          <ComB></ComB>
        </div>
      </div>
    </Provider>

  );
}

export default App;

8. 修改 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

最终 

然后 npm start

效果:

这样吧里面的每一步都自己写一遍 在追一下流程 ,你就算是入门了 可能会我理解不对的地方 欢迎支出 虚心求教...