Redux入门案例：Redux初体验

准备工作

1.构建React项目

npx create-react-demo redux-app

2.在Pages目录下，创建home组件

cd src;mkdir pages/home;cd . > pages/home/index.js

修改pages/home/index.js

import React from 'react'

export default class Home extends React.Component {
    render(){
        return (
            <button>Press me,send an action</button>
        )
    }
}

3.在App.js中引入此组件

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './pages/home'

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

export default App;

构建对象

构建Action

1. 在根目录下创建一个文件夹action
2. 在该目录下创建index.js文件，用来构建Action
3. 在action创建函数里面，利用return，返回一个action对象，注意需要携带type属性
4. 把这个action创建函数导出

const sendAction=()=>{
    return{
        type:"send_type",
        value:'i am an action'
    }
}
module.exports = sendAction

构建Reducer

1. 在根目录下创建一个文件夹reducer
2. 在该目录下创建index.js文件，用来构建Reducer，接收两个参数
3. 第一个参数是state，定义初始化state，赋值
4. 函数里面判断第二个参数action的type值是否是我们发送的
5. 如果是，返回新state
6. 把reducer进行导出

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

module.exports = reducer

构建store

1. 在根目录下创建一个文件夹store
2. 在该目录下创建index.js，
3. 导入之前创建的reducer
4. createStore的返回值就是构建好的store，导出

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

const store = createStore(reducer)

export default store

使用

1.给页面的button按钮绑定一个点击事件

import React from 'react'
import store from '../../store'
import sendAction from '../../action'

export default class Home extends React.Component {
    handleClick = () => {
        const action = sendAction()
        store.dispatch(action)
    }
    render(){
        return <button onClick={this.handleClick}>Press me,send an action</button>
    }
}

为了能在console看到state和action，修改reducer如下

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

module.exports = reducer

2.在组件一加载完毕的时候，通过store进行监听器的注册，返回值可以用来注销监听

import React from 'react'
import store from '../../store'
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())
        })
    }
    render(){
        return (
            <>
            <button onClick={this.handleClick}>Press me,send an action</button>
            <div>{store.getState().value}</div>
            </>
        )
    }
}

3.在点击事件处理函数中，通过store.dispatch来发送一个action

使得页面上呈现出state的返回结果

import React from 'react'
import store from '../../store'
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}>Press me,send an action</button>
            <div>{store.getState().value}</div>
            </>
        )
    }
}

此时可以start项目预览效果