redux-little-router使用手册

redux-little-router使用手册

redux-little-router A tiny router for Redux that lets the URL do the talking. 项目地址: https://gitcode.com/gh_mirrors/re/redux-little-router

项目介绍

redux-little-router 是由优快云公司之外的Formidable Labs开发的一个轻量级的Redux路由库，旨在让URL成为应用程序状态的一部分，并通过简洁的API管理路由。该库遵循三个核心原则：将URL视为状态树的一员、视URL变化为普通动作、以及提供简单且可扩展的路线匹配方式。尽管项目已被归档并不再积极维护（截至2018年12月），它曾经是Redux应用中处理导航和路由的强大选择，尤其是对于希望将路由逻辑紧密集成到Redux架构中的开发者。

该项目的优点在于其使URL状态成为Redux存储的第一类公民，允许更直接地在非React Router的环境下访问和操作URL相关数据，提供了纯Redux风格的API来抽象浏览器导航和路由逻辑。

项目快速启动

安装

首先，通过npm或yarn安装redux-little-router：

npm install redux-little-router --save
# 或者
yarn add redux-little-router

简单配置

在您的Redux配置文件中引入必要的组件并设置路由器：

import { combineReducers, createStore, applyMiddleware } from 'redux';
import { routerForBrowser } from 'redux-little-router';
import yourReducer from './your-reducer';

// 定义路由规则
const routes = [
  '/messages': { title: '消息' },
  '/messages/:user': { title: '用户消息历史' },
];

// 设置路由器并获取对应的reducer和middleware
const [routerReducer, routerMiddleware, routerEnhancer] = routerForBrowser({
  routes,
});

// 创建带路由器的store
const store = createStore(
  combineReducers({
    router: routerReducer,
    yourReducer,
  }),
  applyMiddleware(routerMiddleware),
  routerEnhancer
);

// 根据需要，初始化当前位置（在客户端运行时）
if (!__SERVER__) {
  import { initializeCurrentLocation } from 'redux-little-router';
  const initialLocation = store.getState().router;
  if (initialLocation) {
    store.dispatch(initializeCurrentLocation(initialLocation));
  }
}

导航示例

导航可以通过以下action creator实现：

import { push } from 'redux-little-router';

export const goToMessages = () => (dispatch) =>
  dispatch(push('/messages'));

应用案例和最佳实践

最佳实践之一是在连接React组件时利用中间件处理路由相关的逻辑。确保将导航操作封装在action creators中，以便于测试和重用。

import React from 'react';
import { connect } from 'react-redux';
import { goToMessages } from './actions';

function App({ goToMessages }) {
  return (
    <button onClick={goToMessages}>前往消息</button>
  );
}

const mapDispatchToProps = { goToMessages };

export default connect(null, mapDispatchToProps)(App);

典型生态项目

虽然redux-little-router本身已不再更新，但它的设计理念影响了其他项目的发展，比如connected-react-router，一个更现代且活跃的方案，它同样能够在Redux中管理路由状态，且兼容React Router的最新版本。对于新项目，考虑使用这些活跃维护的替代品，以获得更好的社区支持和技术栈的一致性。

---

请注意，由于redux-little-router已归档，上述示例用于展示其基本用法，并鼓励用户探索当前更广泛接受的解决方案。在实际开发中，务必评估项目的维护状态和社区活动，以做出最合适的选择。

redux-little-router A tiny router for Redux that lets the URL do the talking. 项目地址: https://gitcode.com/gh_mirrors/re/redux-little-router