一个最简单的Redux实现

一个最简单的Redux实现

// 从redux中引入一个createStore
import { createStore } from 'redux';

// 定义一个reduce方法
// reduce方法需要两个参数,一个当前状态对象state,一个用于描述将要对store做些什么的对象
function clickReduce(state = { text: '这是什么' }, action) {
  // 如果是指定的点击事件,新建一个对象,将原有的state与新的属性合并后返回
  if (action.type === 'BTN_CLICK') {
    // 这里我们不能直接改变state的内容,只需要返回一个我们修改完成的对象就行
    return Object.assign({}, state, action.payload);
  }
  // 如果不是,返回原有的state(无任何变动)
  return state;
}

// 新建一个状态仓库,Redux通过全局唯一的store对象管理项目中所有的状态
// createStore接受三个参数 (reducer, preloadedState, enhancer)
// 参数一, 必填 reducer 一个reduce或reduce的集合
// 参数二, 可选 preloadedState 一个state或state的集合
// 参数三, 可选 store增强器,一个柯里化工具
const store = createStore(clickReduce);
// 我们来看看store里面有些什么内容

// action对象
const clickAction = {
  // reduce里注册的事件type
  type: 'BTN_CLICK',        // action用于区别与其它action的标记
  // 需要传入的状态
  text: '这是redux返回的内容' // payload必须是同步的
}

export default class MiniRedux extends PureComponent {
  constructor(props) {
    super(props);
    // 设定组件state为从store中获取
    this.state = store.getState();
  }

  componentDidMount() {
    // 我们可以理解为这是一个事件监听回调,类似于JQ中的on
    store.subscribe(() => {
      // 当store发生改变的时候,我们重新读取state
      this.setState(store.getState());
    });
  }

  btnClick() {
    // 通过store的dispatch方法去主动触发reduce,参数是一个action对象;
    // 类似于JQ中的trigger或是vue中的emit
    store.dispatch(clickAction);
  }

  render() {
    return (
      <div className="miniRedux">
        <span>{this.state.text}</span>
        <button onClick={this.btnClick}>点我</button>
      </div>
    );
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了实现登录功能,我们需要在Redux中管理用户的认证状态和用户信息。 1. 创建Redux Store 首先,我们需要创建Redux store来管理应用程序的状态。创建一个新的Redux store,使用Redux createStore函数。我们需要定义一个初始状态和一个Reducer函数来处理状态的变化。 ```javascript import { createStore } from 'redux'; const initialState = { user: null, isAuthenticated: false, }; function authReducer(state = initialState, action) { switch (action.type) { case 'LOGIN_SUCCESS': return { ...state, user: action.payload, isAuthenticated: true, }; case 'LOGOUT_SUCCESS': return { ...state, user: null, isAuthenticated: false, }; default: return state; } } const store = createStore(authReducer); ``` 2. 创建Action Creators 我们需要创建Action Creators来触发Redux store中的状态变化。在这个例子中,我们需要创建LOGIN_SUCCESS和LOGOUT_SUCCESS action creators。 ```javascript export function loginSuccess(user) { return { type: 'LOGIN_SUCCESS', payload: user, }; } export function logoutSuccess() { return { type: 'LOGOUT_SUCCESS', }; } ``` 3. 创建登录/注销函数 我们需要创建登录和注销函数,这些函数将调用Action Creators来更新Redux store中的状态。 ```javascript export function login(username, password) { return async (dispatch) => { try { const res = await fetch('/api/login', { method: 'POST', body: JSON.stringify({ username, password }), headers: { 'Content-Type': 'application/json' }, }); if (res.ok) { const user = await res.json(); dispatch(loginSuccess(user)); } else { throw new Error('登录失败'); } } catch (error) { console.error(error); } }; } export function logout() { return async (dispatch) => { try { await fetch('/api/logout'); dispatch(logoutSuccess()); } catch (error) { console.error(error); } }; } ``` 4. 连接Redux store到React组件 最后,我们需要将Redux store连接到React组件,以便我们可以在组件中访问认证状态和用户信息。 ```javascript import { useSelector, useDispatch } from 'react-redux'; import { login, logout } from './actions'; function Login() { const isAuthenticated = useSelector((state) => state.isAuthenticated); const dispatch = useDispatch(); const handleLogin = () => { dispatch(login('username', 'password')); }; const handleLogout = () => { dispatch(logout()); }; return ( <div> {isAuthenticated ? ( <> <p>欢迎回来!</p> <button onClick={handleLogout}>注销</button> </> ) : ( <> <p>请登录!</p> <button onClick={handleLogin}>登录</button> </> )} </div> ); } export default Login; ``` 以上就是一个简单Redux实现登录功能的例子。当我们调用login函数时,会向服务器发送请求,如果认证成功,它会调用loginSuccess action creator来更新Redux store中的状态。当我们调用logout函数时,它会调用logoutSuccess action creator来更新Redux store中的状态。在React组件中,我们使用useSelector hook来访问Redux store中的状态,并使用useDispatch hook来调用Action Creators来更新状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值