Redux基本使用（2）

Redux基础使用：http://www.intewl.com/detail/82.html

首先在src创建对应store的目录，一般react脚手架搭建的项目只能导入scr里面的内容，如果导入src外的文件会报错，官方限制

Module not found: You attempted to import ****** which falls outside of the project src/ directory.
 Relative imports outside of src/ are not supported. You can either move it inside src/, 
or add a symlink to it from project's node_modules/.

如果需要解决导入src外的文件可以利用以下方法解决，但是建议不处理，直接将对应需要导入的资源放到src目录下

解决方法：1，项目直接eject命令，如果之前执行过了产生了webpack等文件就不用再执行。

                2，将webpack.config.dev中ModuleScopePlugin命令注释掉即可。

目录结果如下

|——src
|————stroe
|——————action
|————————count.js//对应count的action内容（代码一）
|————————index.js//将所有action合并导出，如果单独导出某个文件此处可以不处理（代码二）
|——————reducers
|————————count.js//对应count的reducers内容（代码三）
|————————index.js//将所有reducers放在一起（代码四）

代码一：count的action代码

在前面调用action事使用

 this.props.dispatch({type:'ADD',data:1})

这种代码不便于维护可以吧dispatch里的内容放在单独文件里面方便以后调用

export function add() {//单独导出用解构赋值方便调用
    return {type:'ADD',data:1}
}
export function reduce() {//单独导出用解构赋值方便调用
    return {type:'REDUCE',data:1}
}

调用页面首先需要导入action里的count

import {add} from '../store/action/count'
//调用方式
this.props.dispatch(add(1))

代码二：如果想将action合并成一个模块导出可以将其他的页面在index中导入最终全部导出

import * as counter from './counter';
import * as user from './user';
export default {
    counter,
    user
}

如果已经将全部action合并了，使用的方式有区别

import index from '../store/action/index'
//调用方式
this.props.dispatch(index.count.add(1))

代码三：将前面用到 的reducer内容放到一个文件中

function counterReducer(state={count:0},action){
    console.log(action)
    switch (action.type) {
        case "ADD":
            state.count+=parseInt(action.data)
            return {...state,...action.data}
        default:
            return state;
    }
}
export  default counterReducer;

代码四：因为项目一般会有多个reducer，所以最终把需要用到的reducer进行合并

import {createStore,combineReducers} from 'redux';
import counterReducer from './counter';
import userReducer from './user';

//3、存入仓库
let store=createStore(combineReducers({
    counter:counterReducer,
    user:userReducer
}));；
export default store;//在index.js直接使用

代码模块化后需要调整下index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from "react-redux"
import store from "./store/reducers/index.js"
ReactDOM.render(
    <Provider store={store}>
        <React.StrictMode>
             <App />
        </React.StrictMode>
    </Provider>
        ,
  document.getElementById('root')

);