spring-boot react redux增删改查

环境准备

以spring-boot react一步一步实现增删改查 组件化为基础代码,在gis分支的基础上，创建一个redux分支，来集成redux组件，实现增删改查

1. 检出代码

git clone https://gitee.com/qinaichen/react-crud.git

cd react-crud

2. 切换分支

git checkout gis

3. 创建redux分支

git checkout -b redux

添加redux库

cd web

npm install redux --save

创建store

1. src目录下创建store文件夹，并创建index.js

import { createStore } from 'redux'

const store = createStore();

export default store;

2. store目录下创建reducer.js

const defaultState = {
    id:'',
    name:'',
    list:[]
}
export default (state = defaultState,action)=>{
    return state;
}

3. store中引入reducer

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

const store = createStore(reducer);

export default store;

store与组件结合使用

1. 将store引入App.js组件

import store from './store'

2. 使用store中的数据对组件中的state进行初始化,并对store的数据进行订阅，当store中的数据发生变化时，组件中的数据也发生相应的变化

constructor(props) {
    super(props);
    this.state = store.getState();
    store.subscribe(()=>{
        this.setState(store.getState());
    })
}

3. 修改App.js中的处理逻辑

edit = (item) => {
    const action = {
        type:'edit_user_name',
        user:item
    }
    store.dispatch(action)
}

query = () => {
   axios.get('/user').then(({data})=>{
       const action = {
           type:'init_user_list',
           list:data
       };
       store.dispatch(action);
   })
}
handleChange = (name) =>{
   const action = {
       type: 'change_user_name',
       name
   };
   store.dispatch(action);
}

handleFormSubmit = (e) => {
   e.preventDefault();
   if(this.state.name !== ''){
        axios.post('/user',{
            id:!this.state.id?'':this.state.id,
            name:this.state.name
        }).then(({data})=>{
            const action = {
                type:'set_user_empty',
                user:{id:'',name:''}
            }
            store.dispatch(action);
            this.query();
        })
   }
}

4. 在reducer中添加相应的处理逻辑

/**
 * 表单控件修改逻辑
 */
if(action.type === 'change_user_name'){
    const newState = Object.create(state);
    newState.name = action.name;
    return newState;
}
/**
 * 初始化list
 */
if(action.type === 'init_user_list'){
    const newState = Object.create(state);
    newState.list = action.list;
    return newState;
}
/**
 * 编辑用户
 */
if(action.type === 'edit_user_name'){
    const newState = Object.create(state);
    const {id,name} = action.user;
    newState.id = id;
    newState.name = name;
    return newState;
}
/**
 * 将state中的id和name设置为空
 */
if(action.type === 'set_user_empty'){
    const newState = Object.create(state);
    const {id,name} = action.user;
    newState.id = id;
    newState.name = name;
    return newState;
}

源码https://gitee.com/qinaichen/react-crud.git 中的redux分支