Redux-Router 项目教程

Redux-Router 项目教程

redux-routerRedux bindings for React Router – keep your router state inside your Redux store项目地址:https://gitcode.com/gh_mirrors/re/redux-router

1. 项目的目录结构及介绍

Redux-Router 项目的目录结构如下：

redux-router/
├── examples/
│   └── ...
├── src/
│   └── ...
├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── ISSUE_TEMPLATE.md
├── LICENSE
├── README.md
└── package.json

目录介绍

• examples/: 包含项目的示例代码。
• src/: 包含项目的主要源代码。
• .babelrc: Babel 配置文件。
• .eslintrc: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .npmignore: npm 忽略文件配置。
• .travis.yml: Travis CI 配置文件。
• ISSUE_TEMPLATE.md: GitHub 问题模板文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文件。
• package.json: 项目依赖和脚本配置文件。

2. 项目的启动文件介绍

Redux-Router 项目的启动文件主要是 src/index.js。这个文件是项目的入口点，负责初始化 Redux 和 React Router 的集成。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import { reduxReactRouter, routerStateReducer, ReduxRouter } from 'redux-router';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import routes from './routes';

const reducer = combineReducers({
  router: routerStateReducer
});

const store = createStore(
  reducer,
  applyMiddleware(/* middleware */)
);

ReactDOM.render(
  <Provider store={store}>
    <ReduxRouter>
      <Router history={browserHistory} routes={routes} />
    </ReduxRouter>
  </Provider>,
  document.getElementById('root')
);

启动文件介绍

• Provider: 将 Redux 的 store 提供给 React 组件。
• Router: React Router 的主要组件，负责路由的匹配和渲染。
• reduxReactRouter: 将 React Router 的状态集成到 Redux store 中。
• routerStateReducer: 处理路由状态的 Redux reducer。
• ReduxRouter: 将 Redux 和 React Router 连接起来的组件。

3. 项目的配置文件介绍

.babelrc

Babel 配置文件，用于配置 Babel 的转译规则。

{
  "presets": ["es2015", "react", "stage-0"]
}

.eslintrc

ESLint 配置文件，用于配置代码检查规则。

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    // 自定义规则
  }
}

package.json

项目依赖和脚本配置文件。

{
  "name": "redux-router",
  "version": "1.0.0",
  "description": "Redux bindings for React Router",
  "main": "src/index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js --hot --inline",
    "build": "webpack --config webpack.config.js"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-router": "^4.0.0",
    "redux": "^3.7.2",
    "redux-router": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",

redux-routerRedux bindings for React Router – keep your router state inside your Redux store项目地址:https://gitcode.com/gh_mirrors/re/redux-router