关于前端:react-redux-reactredux使用方式一

在react的我的项目中应用redux的根本用法

文件次要分四局部

• type
• reducer
• action
• 入口index

type文件

我的项目中不是必须有这个文件的存在，只是为了在大型项目中利于保护将各种type独立进去。

/** 文件示例*/
export const USER_NAME = 'USER_NAME';
export const USER_CODE = 'USER_CODE';

reducer文件

reducer是一个函数，接管action和以后state作为参数，配合action中的type对state的值进行更新

/** 文件示例*/
import { USER_NAME, USER_CODE } from '../type/module1';

const userInfo = {
    userName: '马云',
    userCode: 'my',
};

export function USER_INFO(state = userInfo, action) {
    switch (action.type) {
        case USER_NAME:
            return Object.assign({}, state, { userName: action.name });
        case USER_CODE:
            return Object.assign({}, state, { userCode: action.code });
        default:
            return state;
    }
}

action文件

action是扭转state的惟一方法，action是一个对象其中type是必须的，其它参数能够自在设置（少数状况下这些参数就是更新state所须要的值）

/** 文件示例*/
export const USER_CODE_ACTION = (code) => {
    return {
        type: 'USER_CODE',
        code,
    }
};

export const USER_NAME_ACTION = (name) => {
    return {
        type: 'USER_NAME',
        name,
    }
};

入口文件

入口文件中重点是combineReducers这个辅助函数，他能够将多个reducer合并成最终的reducer，后续应用时能够对这个reducer调用createStore

/** 文件示例*/
import { combineReducers } from 'redux';
import reducer from './reducer';

const store = combineReducers({
    ...reducer
});
export default store;

上面是在组件中如何应用

在根组件中创立store

import state from './redux';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
const store = createStore(state); 

function App() {
    return (
        <Provider store={store}>
            <div className="App">
                <ComOne/>
                <ComTwo/>
            </div>
        </Provider>
    );
}

在组件中如何应用

import { connect } from 'react-redux';
// 引入action
import { USER_CODE_ACTION } from '../../redux/action/module1';

function ComOne(props) {
    const [ count, setCount ] = useState(0);
    return (
        <div className="ComOne">
            <div>{props.userCode}</div>
            <Button type='primary' onClick={ ()=>{props.USER_CODE_ACTION(Math.random())}}>提交</Button>
        </div>
    );
}

// mapStateToProps办法：将state中的变量合成到组件的props中
const mapStateToProps = (state) => { 
    return { 
        userCode: state.USER_INFO.userCode
    }
};
// mapDispatchToProps办法：将action合成到组件的props中，在组件中能够间接props.USER_CODE_ACTION()进行调用
const mapDispatchToProps = {
    USER_CODE_ACTION 
};
/** 
* connect api
* 首先connect之所以会胜利，是因为Provider组件, 在原利用组件上包裹一层，使原来整个利用成为Provider的子组件,它真正连贯 Redux 和 React
*/
export default connect(mapStateToProps, mapDispatchToProps)(ComOne);