乐趣区

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

jiezi

在 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);
退出移动版